html - Create list with title and image left aligned and text right aligned? -

i'd create layout 1 in image

what best , cleanest way create layout in html , cleanest way in css ? have tried : codepen.io/hafsadanguir/pen/bzqldl

thanks in advance :)

i think best , cleanest way achieve result you're showing using bootstrap. following code structure you're showing i'll use own. using bootstrap you'll benefit responsive layout multiple screens

html:

<div class="container" id="container">   <div class="row">     <div class="col-sm-1">       <div class="img" id="imgone"></div>     </div>     <div class="col-sm-2">       <h1>lorem ipsum dolor sit amet</h1>     </div>     <div class="col-sm-9">       <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. sed nec lacus vel nunc sodales ultrices. integer sodales lacus ac molestie fermentum. integer ac tempor massa. </p>     </div>   </div>   <div class="row">     <div class="col-sm-1">       <div class="img" id="imgtwo"></div>     </div>     <div class="col-sm-2">       <h1>lorem ipsum dolor sit amet</h1>     </div>     <div class="col-sm-9">       <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. sed nec lacus vel nunc sodales ultrices. integer sodales lacus ac molestie fermentum. integer ac tempor massa. </p>     </div>   </div>   <div class="row">     <div class="col-sm-1">       <div class="img" id="imgthree"></div>     </div>     <div class="col-sm-2">       <h1>lorem ipsum dolor sit amet</h1>     </div>     <div class="col-sm-9">       <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. sed nec lacus vel nunc sodales ultrices. integer sodales lacus ac molestie fermentum. integer ac tempor massa. </p>     </div>   </div>   <div class="row">     <div class="col-sm-1">       <div class="img" id="imgfour"></div>     </div>     <div class="col-sm-2">       <h1>lorem ipsum dolor sit amet</h1>     </div>     <div class="col-sm-9">       <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. sed nec lacus vel nunc sodales ultrices. integer sodales lacus ac molestie fermentum. integer ac tempor massa. </p>     </div>   </div> </div> 

css:

#container {   background: red; } .img{   height: 50px;   background: green; } #container .row {   margin-bottom: 15px; } #container h1 {   margin: 0; } #imgone {     background-image: url(#your_image_path); } #imgtwo {     background-image: url(#your_image_path); } #imgthree {     background-image: url(#your_image_path); } #imgfour {     background-image: url(#your_image_path); } 

and using little bit of jquery can acheave sharp square images containers:

$('.img').height($('.img').width()); 

remember add bootstrap files in document tag, from here, , you'll need tweak design awn preferences.

a bootply preview here.