delete

by Vladislav Altyncev

HTML

<ul>
    <li>
        <div class="a1"></div>
        <div class="a2">Lorem ipsum dolor sit amet.</div>
    </li>
    <li>
        <div class="a1"></div>
        <div class="a2">Lorem ipsum dolor sit amet.</div>
    </li>
    <li>
        <div class="a1"></div>
        <div class="a2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione vitae.</div>
    </li>
    <li>
        <div class="a1"></div>
        <div class="a2">Lorem ipsum dolor sit amet.</div>
    </li>
    <li>
        <div class="a1"></div>
        <div class="a2">Lorem ipsum dolor sit amet.</div>
    </li>
    <li>
        <div class="a1"></div>
        <div class="a2">Lorem ipsum dolor sit amet.</div>
    </li>
    <li>
        <div class="a1"></div>
        <div class="a2">Lorem ipsum dolor sit amet.</div>
    </li>
    <li>
        <div class="a1"></div>
        <div class="a2">Lorem ipsum dolor sit amet.</div>
    </li>
    <li>
        <div class="a1"></div>
        <div class="a2">Lorem ipsum dolor sit amet.</div>
    </li>
    <li>
        <div class="a1"></div>
        <div class="a2">Lorem ipsum dolor sit amet.</div>
    </li>
</ul>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul {
    padding: 0;
    margin: 0;
}
li {
    margin: 15px;
    display: inline-block;
    vertical-align: top;
    width: 200px;
    background: gray;
}
.a1 {
    max-width: 40px;
    height: 70px;
    background: blue;
    width: 30%;
    vertical-align: top;
    display: table-cell;
}
.a2 {
    display: table-cell;
    vertical-align: middle;
    width: 60%;
}