Inline Block Divs // source http://jsbin.com/wokik/25

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Inline Block Divs</title>
<style id="jsbin-css">
.inline {
  display: inline-block;
}

.b1 {
  width: 150px;
  height:50px;
  background: #ccc;
}

.floatL {
  float: left;
}

.clearL{
  clear: left;
}

.clearR{
  clear: right;
}

.marginL{
  margin-left: 60px;
}

/* decorative */
.container-box{
  border: 2px dashed orange
}
h3.container-legend{
  position: relative;
  top: -.5em;
  left: 1em;
  font-size: medium;
  color: orange;
}
</style>
</head>
<body>
  <div>
    <div class="inline b1">inline b1</div>
    <div class="inline container-box">
      <h3 class="container-legend">inline</h3>
      <p>TEXT ONE</p>
      <p>Lorem ipsum doroler lopa rucosilu box. RESIZE THE WINDOW AND IT WILL ALIGN BELOW.</p>
    </div>
  </div>
  
  <hr>
  
  <div>
    <div class="inline b1">inline b1</div>
    <div class="inline container-box">
      <h3 class="container-legend">inline</h3>
      <p>TEXT ONE</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo veniam amet saepe eligendi nam dicta illum ad laborum tempore hic animi deserunt beatae ducimus excepturi quisquam distinctio nemo reprehenderit in dolores ipsum ratione facilis debitis corporis obcaecati sed at aperiam quasi. Asperiores alias molestias ullam eum excepturi autem illum officiis.</p>
    </div>
  </div>
  
  <hr>
  
  <div>
    <div class="inline floatL b1">nline floatL b1</div>
    <div class="inline floatL container-box">
      <h3 class="container-legend">inline clearL</h3>
      <p>TEXT ONE</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo veniam amet saepe eligendi nam dicta illum ad laborum tempore hic animi deserunt beatae ducimus excepturi quisquam distinctio nemo reprehenderit in dolores ipsum ratione facilis debitis corporis obcaecati sed at aperiam quasi. Asperiores alias molestias ullam eum excepturi autem illum officiis.</p>
    </div>
  </div>

<hr class="clearL">
  
  <div>
    <div class="inline floatL b1">nline floatL b1</div>
    <div class="inline clearL container-box">
      <h3 class="container-legend">inline clearL</h3>
      <p>TEXT ONE</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo veniam amet saepe eligendi nam dicta illum ad laborum tempore hic animi deserunt beatae ducimus excepturi quisquam distinctio nemo reprehenderit in dolores ipsum ratione facilis debitis corporis obcaecati sed at aperiam quasi. Asperiores alias molestias ullam eum excepturi autem illum officiis.</p>
    </div>
  </div>    
  
   <hr class="clearL">
  
  <div>
    <span class="inline b1 floatL">nline floatL b1</span>
      <p>TEXT ONE</p>
      <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo veniam amet saepe eligendi nam dicta illum ad laborum tempore hic animi deserunt beatae ducimus excepturi quisquam distinctio nemo reprehenderit in dolores ipsum ratione facilis debitis corporis obcaecati sed at aperiam quasi. Asperiores alias molestias ullam eum excepturi autem illum officiis.</p>
  </div>
  
   <hr class="clearL">
  
  <div>
    <span class="inline b1 floatL">nline floatL b1</span>
      <p class="marginL">TEXT ONE.marginL</p>
      <p class="marginL">Lorem.marginL ipsum dolor sit amet, consectetur adipisicing elit. Illo veniam amet saepe eligendi nam dicta illum ad laborum tempore hic animi deserunt beatae ducimus excepturi quisquam distinctio nemo reprehenderit in dolores ipsum ratione facilis debitis corporis obcaecati sed at aperiam quasi. Asperiores alias molestias ullam eum excepturi autem illum officiis.</p>
  </div>

.b1 {
  width: 150px;
  height:50px;
  background: #ccc;
}

.floatL {
  float: left;
}

.clearL{
  clear: left;
}

.clearR{
  clear: right;
}

.marginL{
  margin-left: 60px;
}

/* decorative */
.container-box{
  border: 2px dashed orange
}
h3.container-legend{
  position: relative;
  top: -.5em;
  left: 1em;
  font-size: medium;
  color: orange;
}</script>
</body>
</html>