title: Arrange elements horizontally or vertically wrapped in a div
body: <p>I am trying to write generic css selectors which will arrange any elements wrapped inside a div as vertically or horizontally.  I do not have control on the elements which will be placed inside outer div. </p>
  
  <p>For example : In below snippet, div (id=one), div(id=two) and button (id = three) should be displayed as horizontally arranged list of elements. </p>
  
  <pre><code>&lt;div class="arrange-horizontally"&gt;
    &lt;div id="one"&gt;&lt;/div&gt;
    &lt;div id="two"&gt;&lt;/div&gt;
    &lt;button id="three"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Similarly, I need to write another css selector to arrange elements in vertical fashion. </p>
  
  <pre><code>&lt;div class="arrange-vertically"&gt;
    &lt;div id="one"&gt;&lt;/div&gt;
    &lt;div id="two"&gt;&lt;/div&gt;
    &lt;button id="three"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried with display:table-row (displays these elements horizontally).
  display:table-cell does not arrange elements vertically. 
  In fact; I am looking for better approach first and then solution. </p>
  
  <p>This is the css I am using to get the desired effect. One more change, I am making sure either of the vertical or horizontal styled div is enclosed in a div with .table
  Below is just one of the example and there could be more such combinations.</p>
  
  <pre><code>&lt;div class="table&gt;
      &lt;div class="arrange-vertically"&gt;
         &lt;div&gt;
               &lt;button&gt;1stverticallyPlacedElement&lt;/button&gt;
     &lt;/div&gt;
         &lt;div class="arrange-horizontally"&gt;
               &lt;div&gt;some comp1&lt;/div&gt;
               &lt;div&gt;some comp1&lt;/div&gt;
               &lt;div&gt;some comp2&lt;/div&gt;
         &lt;/div&gt;
  
        &lt;button id="three"&gt;This is 3rd element in vertical block&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
      .table {
          display: table;
       }
  
       .arrange-horizontally {
           overflow-x:scroll;
       }
  
       .arrange-horizontally &gt; * {
           display:table-cell;
  
       }
  
       .arrange-vertically {
       }
  
       .arrange-vertically &gt; * {
           display:table-row; 
       }
  </code></pre>
  
  <p>Issues with this - </p>
  
  <ul>
  <li><p>No scroll bars are coming when I try to push lot of elements in the
  horizontal/vertically styled div. </p></li>
  <li><p>From sample code above, "some comp1" element's width is changed as per  "1stverticallyPlacedElement"'s width. This is definitely an issue. </p></li>
  </ul>