JSFiddle - React, Tailwind, and code Playground

HTML

<div class="catalog">
    <div class="img"></div>
    <div class="info">
		<div class="text">
            <span class="title">{Title}</span><br />
			<span class="type">{Product_type}</span>
		</div>
		<div class="buy">
			<span class="price">{Price}</span>
			<span class="button">
                <button class="integrated-button">{PButton}</button>
            </span>
		</div>
    </div>
</div>

CSS

.catalog
{
	border:solid 1px;
	font-size:75%;
	display:-webkit-flex;
}
.catalog .img
{
	margin-right:8px;
    float:left;
	width:50px;
	height:50px;
	background-image:url('http://www.google.com/favicon.ico');
	background-size:cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.catalog .info
{
	-webkit-flex:1;
	display:-webkit-flex;
}
.catalog .info .text
{
	margin-top:8px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.catalog .info .text .title
{
	font-weight:bold;
}
.catalog .info .text .type
{
	font-style:italic;
}
.catalog .info .buy
{
	-webkit-flex:1;
	display:-webkit-flex;
	right:0;
    text-align:right;
}
.catalog .info .buy .price
{
	margin-top:12px;
	-webkit-flex:1;
	float:right;
    text-align:right;
    padding-right:10px;
    font-size:150%;
}
.catalog .info .buy .button
{
	float:right;
    text-align:right;
}
.catalog .info .buy .button .integrated-button
{
	width:80px;
    height:50px;
    font-size:110%;
    line-height:20px;
    color:#008822;
}
.integrated-button
{
    background-color: transparent;
    background-image: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-left: 1px solid #000;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.integrated-button:active
{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0.1)));
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%); 
}