style-test.html

<head>

<!--    https://codepen.io/gntsketches/pen/yLLVqEB-->

<style>

    *,
    *::before,
    *::after {
        box-sizing: border-box
    }

    html {
        font-family: sans-serif;
        font-size: 1rem;
        color: #444;
    }

    #root {
        /*max-width: 450px;*/
        max-width: 700px;
        margin: 2rem auto;
        padding: 0 1rem;
    }

    button {
        cursor: pointer;
        background: #007bff;
        color: white;
        border: 2px solid #007bff;
        /*border: 2px solid #ccc;*/
        margin: 0 0;
        display: inline-block;
        -webkit-appearance: none;
        /*padding: .5rem 1rem;*/
        /*font-size: 1rem;*/
        /*border-radius: 4px;*/
        width: 6rem;
    }

    form {
        display: flex;
        /*margin-bottom: 0.1rem;*/
    }

    [type="text"] {
        width:100%
    }

    ul {
        margin: 0;
        padding: 0;
    }

    li {
        display: flex;
        /*align-items: center;*/
        /*padding: 0.1rem 0;*/
        /*margin-bottom: 1rem;*/
        /*background: #f4f4f4;*/
        /*border-radius: 4px;*/
    }

    li span {
        width: 100%;
    }

</style>

</head>

<body>

<div id="root">

    <form>
        <input type="text">
        <button>Add</button>
    </form>

    <ul>
        <li>
            <button>Play</button>
            <span>A bunch of text</span>
            <button>Delete</button>
        </li>
    </ul>
</div>

</body>