title: Bootstrap 4 vertical align a list-group with some text and dropdown
body: <p>I am quite new to Bootstrap 4. I am struggling to vertically align some elements on a list-group. It consists on some text on the left side and a dropdown on the right.</p>
  
  <pre><code>&lt;div class="dashboard-blocks"&gt;
    &lt;ul class="list-group "&gt;
      &lt;li class="dashboard-block list-group-item"&gt;
        &lt;span class="align-middle"&gt;Write Article/s&lt;/span&gt;
        &lt;span class="btn-group float-right"&gt;
          &lt;button
            type="button"
            class="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          &gt;
            ACTION
          &lt;/button&gt;
          &lt;span class="dropdown-menu dropdown-menu-right"&gt;
            &lt;button class="dropdown-item" type="button"&gt;Action&lt;/button&gt;
            &lt;button class="dropdown-item" type="button"&gt;
              Another action
            &lt;/button&gt;
            &lt;button class="dropdown-item" type="button"&gt;
              Something else here
            &lt;/button&gt;
          &lt;/span&gt;
        &lt;/span&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>On the CSS side I am just applying some styling to the font/colors/borders plus:</p>
  
  <pre><code>.dashboard-block {
   ...
    line-height: normal;
    letter-spacing: normal;
  ...
    padding: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  </code></pre>
  
  <p>As you can see here "Write Article" is not vertically aligned:
  <a href="https://i.stack.imgur.com/1a2Wz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1a2Wz.png" alt="list-group with misalignment"></a></p>