JSFiddle - React, Tailwind, and code Playground
HTML
<div class="promoted">
<ul>
<li>
<div>
<img src="41218.jpg"/>
<span>
<a href="17063.html">Tekst</a>
</span>
</div>
</li>
<li>
<div>
<img src="32712.jpg"/>
<span>
<a href="13017.html">Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst </a>
</span>
</div>
</li>
<li>
<div>
<img src="45237.jpg"/>
<span>
<a href="13193.html">Tekst</a>
</span>
</div>
</li>
</ul>
</div>
CSS
.promoted ul
{
margin-top: 5px;
}
.promoted ul li
{
background: #f6f6f6;
border: solid 1px #ebebeb;
color: #8b8b8b;
display: block;
font-size: 13px;
font-weight: bold;
margin-bottom: 4px;
padding: 2px;
float:left;
width: 100%;
display: block;
}
.promoted ul li span
{
color: #f9881f;
margin-left: 6px;
vertical-align: middle;
}
.promoted ul li img
{
background: #fff;
border: solid 1px #eaeaea;
height: 48px;
margin-right: 8px;
padding: 4px;
vertical-align: middle;
}
.promoted ul li a
{
color: #244161;
line-height: 17px;
text-decoration: none;
}
.promoted ul li a:hover
{
color: #102b4a;
text-decoration: underline;
}