JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div>
    <ul>
        <li class="items">
            <input type="button" value="" class="cancel" />
            <input type="button" value="" class="save" />
            <input type="text" value="Big list item" class="name" />
        </li>
        <li>
        <ul>
            <li id="category_2" id_category="2" class="items">
                <input type="button" value="" class="cancel" />
                <input type="button" value="" class="save" />
                <input type="text" value="Medium list item" class="name" />
            </li>
            <li>
            <ul>
                <li class="items">
                    <input type="button" value="" class="cancel" />
                    <input type="button" value="" class="save" />
                    <input type="text" value="1st small item" class="name" />
                </li>
                <li class="items">
                    <input type="button" value="" class="cancel" />
                    <input type="button" value="" class="save" />
                    <input type="text" value="2nd small item" class="name" />
                </li>
                <li class="items">
                    <input type="button" value="" class="cancel" />
                    <input type="button" value="" class="save" />
                    <input type="text" value="3rd small item" class="name" />
                </li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
</div>

CSS

li {
    width: 80%;
    clear: both;
    float: right;
    margin: 0 0 0.2em 0;
}

li.items {
    background-color: #f90;
}

li .save, li .cancel {
    float: right;
    width: 20px;
    height: 20px;
}

input.name {
    width: -webkit-calc(100% - 45px);
    width: -moz-calc(100% - 45px);
    width: -o-calc(100% - 45px);
    width: -ms-calc(100% - 45px);
    width: calc(100% - 45px);
}