I tried by using display inline-block to achieve 3 columns but 3rd column comes at separate row:
.wrapper {
width: 100%;
}
.column {
display: inline-block;
min-height: 150px;
width: 33.33%;
border: 1px solid black;
min-width: 300px;
margin-bottom: 8px;
}<div class="wrapper">
<div class="column">abc</div>
<div class="column">def</div>
<div class="column">ghi</div>
</div>Not able to figure out the reason.
You can use flex, flex is very good to make responsive div. It's a simple example.
--- HTML ----
<div class="flex-wrapper">
<your-element class="item"> 1 </your-element>
<your-element class="item"> 2 </your-element>
<your-element class="item"> 3 </your-element>
</div>
--- CSS ---
.flex-wrapper {
display: flex;
flex-wrap: wrap; // if you want to lots of items, will be wrapped
}
.item {
width: 33.3%;
}
and if your items have margin, you can calculate that like this.
.item {
margin: 5px;
width: calc(33.3% - 10px);
}
Example : 
I hope will be helped you.