JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content clearfix">
        	<div class="col-1">
            	<h4 class="f-Lobster">Быстрая подборка </h4>
            </div><!--/.col-1-->
            <div class="col-2">
            <!-- Breadcrumbs -->
            <ol class="breadcrumb">
                <li><a href="#">Главная</a></li>
                <li class="active">Каталог</li>
            </ol>
            <div class="products clearfix">
            	<div class="products_item">
                	<img src="http://savepic.ru/6515392.jpg" class="img-responsive">
                    <h3>Название продукта</h3>
                    <div class="product_caption">Краткое описание в один абзац</div>
                    <div class="tags">
                    	<a href="#" class="underline">офис</a>, <a href="#" class="underline">красные</a>, <a href="#" class="underline">дерево</a>, <a href="#" class="underline">название фирмы</a>
                    </div>	
                </div><!--/.products_item-->
            	<div class="products_item">
                	<img src="http://savepic.ru/6515392.jpg" class="img-responsive">
                    <h3>Название продукта</h3>
                    <div class="product_caption">Краткое описание в один абзац</div>		
                </div><!--/.products_item-->
            	<div class="products_item">
                	<img src="http://savepic.ru/6515392.jpg" class="img-responsive">
                    <h3>Название продукта</h3>
                    <div class="product_caption">Краткое описание в один абзац</div>
                </div><!--/.products_item-->
            	<div class="products_item">
                	<img src="http://savepic.ru/6515392.jpg" class="img-responsive">
                    <h3>Название продукта</h3>
                    <div class="product_caption">Краткое описание в один абзац</div>
                </div><!--/.products_item-->
            	<div class="products_item">
                	<img src="http://savepic.ru/6515392.jpg"...

CSS

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  width: auto;
  max-width: 960px;
  padding: 0 10px;
}

.col-1{
	float:left;
	width: 25.5555%;
	padding:0 10px 0 0;
}
.col-2{
	float:left;
	width: 74.4445%;
	padding-left:34px;
	background:#FFC;
}
.products{
	font-size:0;
	margin: -20px 0 0 -60px;
	display:table; /* For safari Win */
}
.products_item{
	display:inline-block;
	width:33.33%;
	overflow:hidden;
	font-size:12px;
	vertical-align:top;
	max-width:242px;
	padding: 20px 0 0 60px;
}
.products_item img{
	border:1px solid #d7d7d7;
}
.products_item h3{
	font-size:18px;
	color:#111;
}
.product_caption{
	font-size:14px;
	color:#111;
}
.tags, .tags a{
	color:#dd7b6b;
}

@media (max-width: 767px) {
	
.products{
	margin: -20px 0 0 -20px;
	display:table; /* For safari Win */
}
.products_item{
	width:50%;
	max-width:auto;
	padding: 20px 0 0 20px;
}