title: Vertically align div with another div
body: <p><a href="https://i.stack.imgur.com/rHZAO.png" rel="nofollow noreferrer">divs out of alignment</a></p>
  
  <p>These are inline-block divs that are dynamically added with varying lengths of text.
  I tried setting the same height for divs, setting the same line-height for the texts and also padded texts so their lengths are the same, but theses divs are still mis-aligned.
  Is there a css trick or JS hack for this? Thanks.</p>
  
  <p>Scss:</p>
  
  <pre><code>.cards-container {
          border: 1px solid white;
          margin: auto;
          margin-top: 2em;
          width: 80%;
          .transition-wrapper {
              border: 1px solid yellow;
              display: inline-block;
              margin: 0.2em;
              width: $card-width + 10;
              height: $card-height + 10;
              .card-wrapper {
                  position: relative;
                  border: 1px solid grey;
                  border-radius: 2px;
                  width: $card-width;
                  height: $card-height;
                  margin: auto;
                  top: 50%;
                  transform: translateY(-$card-height / 2);
                  .stock-card {
                      text-align: center;
                      border-left: 3px solid $hacker-green;
                      border-top-left-radius: 1px;
                      border-bottom-left-radius: 1px;
                      width: $card-width;
                      height: $card-height * .975;
  
                      transition: all 0.3s ease;
                      color: white;
                      &amp;:hover {
                          border-left: 5px solid red;
                          border-top-left-radius: 1px;
                          border-bottom-left-radius: 2px;
                      }
                      .stock-symbol-wrapper {
                          border: 1px solid blue;
                          height: $card-height * .975 * (1/4);
                      }
                      .stock-name-wrapper {
                          border: 1px solid red;
                          height: $card-height * .975 * (3/4);
                      }
                  }
                  .stock-card &gt; * {
                      vertical-align: middle;
                  }
                  .icon {
                      position: absolute;
                      top: 0;
                      right: 0;
  
                      &amp;:hover {
                          cursor: pointer;
                      }
                  }
              }
          }
      }
  </code></pre>
  
  <p>Jsx</p>
  
  <pre><code>&lt;div className='cards-container'&gt;
                  {stockInfo.map((si, i) =&gt; {
                      const sym = si[0];
                      const name = si[1];
                      return (&lt;div className='transition-wrapper' onMouseEnter={(evt) =&gt; {registerCardSymbol(evt); toggleIcon()}}
                          onMouseLeave={(evt) =&gt; {deregisterCardSymbol(evt); toggleIconOff()}} id={sym} key={i} &gt;
                          &lt;Transition animation='fade up' duration={300} transitionOnMount={true}&gt;
                              &lt;div className='card-wrapper'&gt;
                                  &lt;div className='stock-card' id={sym} &gt;
                                      &lt;div className='stock-symbol-wrapper'&gt;{sym}&lt;/div&gt;
                                      &lt;div className='stock-name-wrapper'&gt;{name}&lt;/div&gt;
                                      {icon &amp;&amp; (cardSymbol === sym) ? &lt;Icon onClick={(evt) =&gt; {removeStock(evt); /*registerCardSymbol(evt); toggleIcon()*/}}
                                          id={sym} className='icon' color='grey' name='delete'&gt;&lt;/Icon&gt; : ''}
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/Transition&gt;
                      &lt;/div&gt;)
                  })}
              &lt;/div&gt;
  </code></pre>