title: css inline-blocks and bootstrap grid system output
body: <p>I'm trying to have a specific <code>HTML</code> markup of my divs using <code>css</code> and <code>bootstrap 3.2</code>. The image below demonstrates the result I want to get.</p>
  
  <p>I've used the bootstrap grid system so that my page would be responsive and properly displayed in small screen devices. This is the code I've tried.  And I used <a href="http://www.bootply.com" rel="nofollow noreferrer">http://www.bootply.com</a> to test it.</p>
  
  <p>Any ideas how to get the markup ? </p>
  
  <pre><code>&lt;div&gt;
    &lt;div style="display:inline-block; border:1px solid gray; width:150px; height:150px;"&gt;
      &lt;img src='' alt="image go here !"/&gt;
    &lt;/div&gt;
  
    &lt;div class="container-fluid" style="display:inline-block;"&gt;
      &lt;div class="row" style="border:1px solid gray;"&gt;
        &lt;div class="col-md-9"&gt;This is the product name&lt;/div&gt;
        &lt;div class="col-md-3 text-right"&gt;1 230.99&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row" style="display:inline-block; border:1px solid gray;"&gt;
        &lt;div class="col-md-6"&gt;Property 1&lt;/div&gt;
        &lt;div class="col-md-6"&gt;Property 2&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The desired result :</strong>
  <img src="https://i.stack.imgur.com/k4gv5.png" alt="The desired result"></p>
  
  <p><strong>EDIT : The result I get :</strong>
  <img src="https://i.stack.imgur.com/232Bc.png" alt="The result I get"></p>