bootstrap how to make two div in one line - html

Question

I am trying to write css code according to this image:
However, I don't know how to make two divs in one line, and hard to write code to make them exactly the same, tried many times. Could someone help me on that?
Here is my code:
<div class="media-card">
<div class="row">
<div class="col-sm-4 col-md-4">
<img class="img-responsive" src="{{ asset('images/twitter-icon-lg.png') }}">
</div>
<div class="col-sm-8 col-md-8">
<div class="media">
<a class="pull-left" href="#">
<img class="media-photo" src="{{ asset('images/header.png') }}" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Matrix User</h4>
<p><span class="">#MatrixUser</span></p>
</div>
</div>
<div><span class="">2k followers</span></div>
</div>
</div>
<div>
<p>Approval required to publish</p>
<button>Select</button>
</div>
</div>
Here is the css part:
.block-inline {
display: inline-block;
}
.media-size {
height: 120px;
width: 90px;
border: 1px solid #CCCCCC;
}
.media-photo {
width: 45px;
}

Answer 1

Please try below code and keep in mind media class is already in bootstrap so always use other class:
HTML
<div class="media-card">
<div class="row2">
<div class="col-sm-4 col-md-4">
<img class="img-responsive" src="{{ asset('images/twitter-icon-lg.png') }}">
</div>
<div class="col-sm-8 col-md-8 media-right">
<a class="pull-left" href="#">
<img class="media-photo" src="{{ asset('images/header.png') }}" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Matrix User</h4>
<p><span class="">#MatrixUser</span></p>
</div>
<span class="">2k followers</span>
</div>
</div>
<p>Approval required to publish</p>
<button>Select</button>
</div>
CSS
.row2{
overflow:hidden;
}
.media-card{
width:630px;
background:#F7F7F7;
}
.media-card div{
border:1px solid #ccc;
}
.media-right{
padding-left:0px;
padding-right:0px;
}
.block-inline {
display: inline-block;
}
.media-size {
height: 120px;
width: 90px;
border: 1px solid #CCCCCC;
}
.media-photo {
width: 45px;
}