JSFiddle - React, Tailwind, and code Playground

by mdss

HTML

<div>
	<ul class="products">
		<li>
			<p class="products_link"><a>title со множеством  со множеством  со множеством слов в названии, аж на три строки</a></p>
			<div class="products_pic">
				<a><img src="http://wa.makexhtml.ru/published/publicdata/WA/attachments/SC/products_pictures/d1252887-2eaf-11df-9a1b-002215d704c4_enl_thm.jpeg" alt="" /></a>
			</div>
		</li>
		<li>
			<p class="products_link"><a>title</a></p>
			<div class="products_pic">
				<a><img src="http://wa.makexhtml.ru/published/publicdata/WA/attachments/SC/products_pictures/d1252887-2eaf-11df-9a1b-002215d704c4_enl_thm.jpeg" alt="" /></a>
			</div>
		</li>
		<li>
			<p class="products_link"><a>title со множеством  со множеством со множеством со множеством  со множеством слов в названии, аж на три строки</a></p>
			<div class="products_pic">
				<a><img src="http://wa.makexhtml.ru/published/publicdata/WA/attachments/SC/products_pictures/d1252887-2eaf-11df-9a1b-002215d704c4_enl_thm.jpeg" alt="" /></a>
			</div>
		</li>
		<li>
			<p class="products_link"><a>title</a></p>
			<div class="products_pic">
				<a><img src="http://wa.makexhtml.ru/published/publicdata/WA/attachments/SC/products_pictures/d1252887-2eaf-11df-9a1b-002215d704c4_enl_thm.jpeg" alt="" /></a>
			</div>
		</li>
		<li>
			<p class="products_link"><a>title</a></p>
			<div class="products_pic">
				<a><img src="http://wa.makexhtml.ru/published/publicdata/WA/attachments/SC/products_pictures/d1252887-2eaf-11df-9a1b-002215d704c4_enl_thm.jpeg" alt="" /></a>
			</div>
		</li>
	</ul>
</div>

CSS

.products {
    list-style:none;
    margin-left:-10px;
}
.products li {
	display:inline;
}
.products_link {
    width:150px;
    padding-bottom:150px;
    display:inline-block;
    vertical-align:top;
}
.products_pic {
	width:148px;
    height:148px;
    text-align:center;
    line-height:150px;
    border:1px solid blue;
    margin-left:-150px;
    display:inline-block;
    vertical-align:bottom;
}
.products_pic img {
    max-width:148px;
    max-height:148px;
    vertical-align:middle;
}