JSFiddle - React, Tailwind, and code Playground

HTML

<div class="summary">
    <div class="summary-head">
        <a href="#">Название материала</a>
    </div>
    
    <div class="summary-body">
        <div class="summary-image">
            <img src="http://vorozheja.ru/_ld/0/90049543.jpg" />
        </div>
        
        <div class="summary-text">
            <p>
                Действие пьесы проис­ходит в одно­ком­натной квар­тире
                Джимми и Элисон Портер в Бирмин­геме, в одном из крупных
                городов Средней Англии воскресным вечером...
            </p>
        </div>
    </div>
    
    <div class="summary-foot">
        <span class="summary-views">Просмотров: 999+</span>
    </div>
</div>

CSS

body { margin: 0; }

p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }

.summary {
    margin: 30px;
    
    border: 1px solid #ccc;
}

.summary-head,
.summary-foot {
    padding: 10px 20px;
    
    background: #ddd;
}

.summary-body {    
    padding: 20px;
}

.summary-body:after {    
    content: '';
    display: table;
    clear: both;
}

.summary-image {
    float: left;
}

.summary-image img {
    display: block;
    
    width: 118px;
	height: 118px;
    
    border: 1px solid #d8d8d8;
}

.summary-text {
    margin-left: 140px;
}