title: How to vertically align the child divs in a parent div?
body: <p>So I have 1 parent div and 4 child divs. I have horizontally aligned those child divs in the parent div, however they are not vertically aligned, it's like a graph the way the child divs are placed.
  How do I vertically align them?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.servicesContent {
    border: solid red 2px;
    font-family: arial;
    width: 70%;
    margin: 0 auto;
  }
  .servicesH1 {
    text-align: center;
    color: #3a414e;
  }
  .servicesContent h2 {
    color: #3a414e;
  }
  #h3 {
    color: #3a414e;
  }
  .contentLists {
    border: solid green 2px;
    width: 100%;
    text-align: center;
  }
  #lists {
    display: inline-block;
    text-align: center;
    padding: 5px;
    margin: 5px;
    border: 1px solid blue;
    height: 190px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="servicesContent"&gt;
    &lt;h1 class="servicesH1"&gt;Services&lt;/h1&gt;
    &lt;h2&gt;Help!&lt;/h2&gt;
    &lt;p&gt;Child Divs are not vertically aligned&lt;/p&gt;
    &lt;p&gt;Help&lt;/p&gt;
  
    &lt;div class="contentLists"&gt;
      &lt;div id="lists"&gt;
        &lt;h3 id="h3"&gt;first&lt;/h3&gt;
        &lt;ul&gt;
          &lt;li&gt;afasasf&lt;/li&gt;
          &lt;li&gt;fasfsafas&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="lists"&gt;
        &lt;h3 id="h3"&gt;second&lt;/h3&gt;
        &lt;ul&gt;
          &lt;li&gt;gdagadg&lt;/li&gt;
          &lt;li&gt;agadgadg&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="lists"&gt;
        &lt;h3 id="h3"&gt;third&lt;/h3&gt;
        &lt;ul&gt;
          &lt;li&gt;dsfdsfs&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="lists"&gt;
        &lt;h3 id="h3"&gt;fourth&lt;/h3&gt;
        &lt;ul&gt;
          &lt;li&gt;dagadg&lt;/li&gt;
          &lt;li&gt;agadgdhtjrs&lt;/li&gt;
          &lt;li&gt;jjee&lt;/li&gt;
          &lt;li&gt;ejtejtjejejgfhdgh&lt;/li&gt;
          &lt;li&gt;Gtejjtejejtds&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>