JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<ul>
    

     <li>
        <div class="buttons">
            <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
        </div>
        <div class="owners">
            <a>Даня Абрамов</a>
        </div>
        <div class="text">short text
        </div>
    </li>

    

    <li>
        <div class="buttons">
            <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
        </div>
        <div class="owners">
            <a>Даня Абрамов</a>
        </div>
        <div class="text">longer text longer text longer text longer text longer text longer text longer text longer text longer text 
        </div>
    </li>
    
    
    <li>
        <div class="buttons">
            <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
        </div>
        <div class="owners">
            <a>Даня Абрамов</a> и <a>Саша Васильев</a>
        </div>
        <div class="text">
            longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text 
        </div>
    </li>
    <li>
        <div class="buttons">
            <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
        </div>
        <div class="owners">
            <a>Даня Абрамов</a> и <a>Саша Васильев</a>
        </div>
        <div class="text">
            трали-вали трали-вали трали-вали трали-вали
        </div>
    </li>
    </ul>

CSS

li {
    overflow: hidden;
}
.buttons, .owners {
    float: left;
}
.text {
    overflow: hidden;
    color: red;
    padding-left: 4px;
}






/* the rest is visual styling */

ul li {
    line-height: 1.5em;
    padding: 12px 8px 12px 8px;
    margin-bottom: 12px;
    margin-top: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-size: 15px;
    background-color: #DBEAFF;
    min-height: 23px;
}

.buttons {
    min-width: 13px;
    vertical-align: top;
    margin-top: 3px;
    margin-bottom: -3px;
}

.buttons a {
    padding: 13px 9px 5px 9px;
}