JSFiddle - React, Tailwind, and code Playground

HTML

<div class="toolbar">
  <button class="grid" onclick="toggle('grid')">Grid</button>
  <button class="list" onclick="toggle('list')">List</button>
</div>
<div id="items" class="grid">
  <div class="item">
    <img src="http://www.imgworlds.com/wp-content/uploads/2015/12/rides-thumbs-ib-haunted.jpg">
    <div class="info">
      <div class="title">The Haunted Hotel</div>
      <div class="desc">Visit the Haunted Hotel if you dare, but know before you enter that leaving is not easy</div>
    </div>
  </div>
  <div class="item">
    <img src="http://www.imgworlds.com/wp-content/uploads/2015/11/Theme-Park-Marvel-Battle-of-Ultron-Avengers-Ride.jpg">
    <div class="info">
      <div class="title">Avengers Battle of Ultron</div>
      <div class="desc">Join Iron Man, Thor, Black Widow, Hawkeye, Captain America and the Hulk as they take to the skies to battle</div>
    </div>
  </div>
  <div class="item">
    <img src="http://www.imgworlds.com/wp-content/uploads/2015/11/Theme-Park-Marvel-Hulk-Circumotion-Ride.jpg">
    <div class="info">
      <div class="title">Hulk Epsilon Base 3D</div>
      <div class="desc">Take your motion-seat in our one-of-a kind, state-of-the-art stereoscopic cinema dome to see Marvel’s Hulk</div>
    </div>
  </div>
</div>

CSS

img {
  min-height: 200px;
  max-width: 200px;
}

.toolbar {
  margin-bottom: 30px;
}

.item .title {
  margin-bottom: 10px;
}

.item .desc {
  padding: 0 15px 0 0;
}

.grid .item {
  margin-bottom: 15px;
  width: 33.3333%;
  float: left;
}

.grid .desc {
  display: none;
}

.list .item {
  margin-bottom: 15px;
  display: flex;
}

.list img {
  margin-right: 15px;;
}

JavaScript

function toggle(cssClass) {
	jQuery('#items').attr('class', cssClass);
}