title: CSS Metric Dashboard
body: <p>I'm trying to create a dashboard displaying some simple metrics, but having a nightmare aligning the div contents.</p>
  <p>My Code:</p>
  <pre><code>&lt;style&gt;
      body {
          background-color: #000000;
      }
      #metrics {
          width: 95%;
          margin: 20px auto;
      }
      #metrics &gt; div {
          background-color: #1FAAAA;
          height: 200px;
          width: 200px;
          display: inline-block;
          margin:20px;
      }
      #metrics &gt; div &gt; div {
          font-weight: bold;
          color:#FFFFFF;
          width: 100%;
          text-align: center;
      }
      .head {
          font-size: 40px;
          width: auto;
          line-height: 35px;
      }
      .top_margin {
          margin-top: 10px
      }
      .count {
          font-size: 60px;
      }
      .diff {
          font-size: 40px;
      }
  &lt;/style&gt;
  
  &lt;div id=&quot;metrics&quot;&gt;
      &lt;div&gt;
          &lt;div class=&quot;head&quot;&gt;Long Status&lt;/div&gt;
          &lt;div class=&quot;count&quot;&gt;00&lt;/div&gt;
          &lt;div class=&quot;diff&quot;&gt;+/- 00&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div class=&quot;head&quot;&gt;&lt;br&gt;Status&lt;/div&gt;
          &lt;div class=&quot;count &quot;&gt;00&lt;/div&gt;
          &lt;div class=&quot;diff&quot;&gt;+/- 00&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I am trying to align the statuses so that they display inline. I'm guess there probably is a way to do this using CSS.</p>
  <p>Thanks in advance.</p>