JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
      <div class="category floatleft width33 vertical-separator">
      <div class="spacer">
        <h2>
          <a href="#" title="Ceiling">
              <p>Ceiling</p>
          <img src="http://coding4web.ru/wp-content/uploads/bular/potolok26_200x200.jpg" alt="Ceiling"  />         </a>
        </h2>
      </div>
    </div>
      <div class="category floatleft width33 vertical-separator">
      <div class="spacer">
        <h2>
          <a href="#" title="Walls">
              <p>Walls blablabla bla bla bla</p>
          <img src="http://coding4web.ru/wp-content/uploads/bular/stena9_200x200.jpg" alt="stenovye-paneli"  />         </a>
        </h2>
      </div>
    </div>
      <div class="category floatleft width33 ">
      <div class="spacer">
        <h2>
          <a href="#" title="Lights">
              <p>Lights</p>
          <img src="http://coding4web.ru/wp-content/uploads/bular/svet7_200x200.jpg" alt="lights"  />         </a>
        </h2>
      </div>
    </div>
    <div class="clear"></div>
  </div>

CSS

.floatleft, span.floatleft {
    float: left;
  }
  .width33 {
    width: 33%;
  }
  .row{
    width: 510px;
  }
  .spacer{
    padding: 6px;
  }
.spacer a{
    height: 200px;
    position: relative;
    display: block;
    width: 150px;
}
  .spacer img{
    margin-top: 6px;
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 0px;
  }

  .row div{
    display:inline-block;
    vertical-align:bottom;
  }