JSFiddle - React, Tailwind, and code Playground

HTML

<div id="conteyner">
 <div class="con-1"></div>
 <div class="con-2"></div>
 <div class="con-3"></div>
</div>

CSS

#conteyner{
    text-align: justify;
	max-width: 400px;
	height: 200px;
	background: #72d3a0; 
	margin: 0 auto;
    font-size: 0;
    line-height: 0;
}

#conteyner:after{
	content: "";
	width: 100%;
}

#conteyner:after, .con-1, .con-3, .con-2{
	display: inline-block;
    margin-top: 50px;
    background: #2c648b;
}

.con-1{
	width: 60%;
    height: 100px;
    margin-left: 0;
}

.con-2{
	width: 10%;
    height: 100px;
}

.con-3{
	width: 20%;
    height: 100px;
}