JSFiddle - React, Tailwind, and code Playground

by Nikita Jadhao

HTML

<div class="edit-invetory">
<span class="inventory-formaula edit">
<span class="bold">Formula</span>

    <ul>
        <li>
            <div class="span-text"> <span class="span-right-text">
                Name:
            </span>
 <span class="span-left-text">
                Tanners
            </span>

            </div>
        </li>
        <li>
            <div class="span-text"> <span class="span-right-text">
                Type:
            </span>
 <span class="span-left-text">
                Daily
            </span>

            </div>
        </li>
                <li>
            <div class="span-text"> <span class="span-right-text">
                something:
            </span>
 <span class="span-left-text">
                15 thru 5000
            </span>

            </div>
        </li>
    </ul>
    </span>
</div>

CSS

.edit {
    margin-left: 15px;
    float: left;
    display: inline-block;
}
.edit  li{
    list-style: none;
    text-align:  justify;
}
.edit ul .span-text {
    height: 20px;
    padding: 3px;
}
.edit ul .span-text .span-right-text {
    width:50%;
    float: left;
    text-align: right;
}
.span-text .span-left-text {
    float: right;
    width:45%;
    text-align: left;
}