title: Align the items to top of the card
body: <p>I want the both sub-cards in cluster -1 and 2 align in the top, where as they are aligning in the bottom. Do check the css and screenshot. Where .cards refer to clusters and sub-cards-rec and sub-cards-ana refers to the sub-cards present inside the each cluster.
  Please look into this problem why the cards are not aligned from the top but are aligned in the bottom.</p>
  <pre><code>&lt;CardGroup&gt;
        &lt;Card className=&quot;cards&quot;&gt;
          &lt;Card.Body&gt;
            &lt;Card.Title&gt;Cluster-1&lt;/Card.Title&gt;
            &lt;Card.Text&gt; &lt;/Card.Text&gt;
          &lt;/Card.Body&gt;
          &lt;Card border=&quot;secondary&quot; style={{ width: '18rem' }} className =&quot;sub-cards-ana&quot;&gt;
            &lt;Card.Header&gt;Analysis Unit - 1&lt;/Card.Header&gt;
            &lt;Card.Body&gt;
              &lt;Card.Title&gt;[ID]&lt;/Card.Title&gt;
              &lt;div className=&quot;response&quot;&gt;
                &lt;h6&gt;Response status: {state.msgStatus} {state.strStatusText}&lt;/h6&gt;
                {/* &lt;h6&gt; Output: {JSON.stringify(state.data)}&lt;/h6&gt; */}
              &lt;/div&gt;
              &lt;Card.Text&gt;
              &lt;h6&gt;&lt;Badge pill bg=&quot;warning&quot; &gt;System usage:{}&lt;/Badge&gt;&lt;/h6&gt;
              &lt;/Card.Text&gt;
            &lt;/Card.Body&gt;
          &lt;/Card&gt;&lt;br/&gt;
          &lt;Card border=&quot;secondary&quot; style={{ width: '18rem' }} className =&quot;sub-cards-rec&quot;&gt;
            &lt;Card.Header&gt;Recording Unit - 1&lt;/Card.Header&gt;
              &lt;Card.Body&gt;
                &lt;Card.Title&gt;[ID]&lt;/Card.Title&gt;
                &lt;Card.Text&gt;
                &lt;h6&gt;&lt;Badge style={{ backgroundColor: &quot;lightgreen&quot; }} onClick={onGetClusters}&gt;Cluster Info&lt;/Badge&gt;&lt;/h6&gt;
                &lt;h6&gt;&lt;Badge pill bg=&quot;primary&quot;&gt;Cumulative Data Rate:{'140KBps'}&lt;/Badge&gt;&lt;/h6&gt;
                
                {/* &lt;h6 onClick={toggle}&gt;&lt;Badge pill bg=&quot;primary&quot; &gt;Cumulative Sensor Status:{}&lt;/Badge&gt;&lt;/h6&gt; */}
  
                {css ? (&lt;h6 onClick={toggle2}&gt;&lt;Badge pill bg=&quot;success&quot; &gt;Cumulative Sensor Status:{'Online'}&lt;/Badge&gt;&lt;/h6&gt;)
                :(&lt;h6 onClick={toggle2}&gt;&lt;Badge pill bg=&quot;danger&quot; &gt;Cumulative Sensor Status:{'Offline'}&lt;/Badge&gt;&lt;/h6&gt;)
                }
                &lt;/Card.Text&gt;
            &lt;/Card.Body&gt;
          &lt;/Card&gt;&lt;br/&gt;
        &lt;/Card&gt;&lt;br/&gt;
  
        &lt;Card className=&quot;cards&quot;&gt;
          &lt;Card.Body&gt;
            &lt;Card.Title&gt;Cluster-2&lt;/Card.Title&gt;
            &lt;Card.Text&gt;&lt;/Card.Text&gt;
          &lt;/Card.Body&gt;
          &lt;Card border=&quot;secondary&quot; style={{ width: '18rem' }} className =&quot;sub-cards-ana&quot;&gt;
            &lt;Card.Header&gt;Analysis Unit - 1&lt;/Card.Header&gt;
              &lt;Card.Body&gt;
                &lt;Card.Title&gt;[ID]&lt;/Card.Title&gt;
              &lt;Card.Text&gt;
                &lt;h6&gt;&lt;Badge pill bg=&quot;warning&quot; &gt;System usage:{}&lt;/Badge&gt;&lt;/h6&gt;
              &lt;/Card.Text&gt;
              &lt;/Card.Body&gt;
          &lt;/Card&gt;&lt;br /&gt;
          &lt;Card border=&quot;secondary&quot; style={{ width: '18rem' }} className =&quot;sub-cards-ana&quot;&gt;
            &lt;Card.Header&gt;Analysis Unit - 2&lt;/Card.Header&gt;
              &lt;Card.Body&gt;
                &lt;Card.Title&gt;[ID]&lt;/Card.Title&gt;
              &lt;Card.Text&gt;
                &lt;h6&gt;&lt;Badge pill bg=&quot;warning&quot; &gt;System usage:{}&lt;/Badge&gt;&lt;/h6&gt;    
              &lt;/Card.Text&gt;
              &lt;/Card.Body&gt;
          &lt;/Card&gt;&lt;br /&gt;
        &lt;/Card&gt;
      &lt;/CardGroup&gt;
  </code></pre>
  
  <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>.cards{
      position: relative;
      margin-top: 5px;
      box-sizing: 30px;
      padding-bottom: 20px;
      max-width: fit-content;
      padding-right:40px;
  }
  
  .cards .sub-cards-rec{
      position: relative;
      margin-left: 50px;
      background-color: rgb(161, 160, 233);
      cursor: pointer;
  }
  
  .cards .sub-cards-ana{
      position: relative;
      margin-left: 50px;
      background-color: rgb(163, 229, 157);
      cursor: pointer;
  }</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/GBnQV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GBnQV.png" alt="enter image description here" /></a></p>