JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<div class="list-item col-md-12 clearfix">
  <div class="col-md-1">
    <img class="img-circle" src="https://aframe.io/aframe/examples/_skies/puydesancy.jpg">
  </div>
  <div class="col-md-2">
    <strong>
      <a href="#/buildings/1">Central park</a>
    </strong>
  </div>
  <div class="col-md-5">
    <span>The description for central park description for the central park</span>
  </div>
  <div class="col-md-2">
    <span>Category count:</span>
    <strong>3</strong>
  </div>
  <div class="col-md-2">
    <span>Panorama count:</span>
    <strong>7</strong>
  </div>
</div>

CSS

.list-item {
    border-bottom: 1px solid #e7e7e7;
    float: left;
    padding: 15px 0;
    width: 100%;
}

.list-item img {
  width: 60px;
  height: 60px;
}

.col-md-2 {
  float: left;
  width: 16.66666667%;
}