<div class="u-baseline-grid">
  <div class="demo-container">
    <div class="flex-col">
      <h1>H1</h1>
    </div>
    <div class="flex-col">
      <h2>H2</h2>
    </div>
    <div class="flex-col">
      <h3>H3</h3>
    </div>
    <div class="flex-col">
      <h4>H4</h4>
    </div>
    <div class="flex-col">
      <h5>H5</h5>
    </div>
    <div class="flex-col">
      <h6>H6</h6>
    </div>
    <div class="flex-col">
      <p>p</p>
    </div>
    <div class="flex-col">
      <button class="p-button--positive">Button</button>
    </div>
  </div>
  <div class="demo-container">
    <div class="flex-col">
      <p>paragraph</p>
    </div>
    <div class="flex-col">
      <label for="exampleInputEmail1">label</label>
    </div>
    <div class="flex-col">
      <input type="text" id="exampleInputEmail1" placeholder="Email">
    </div>
  </div>
  <div class="demo-container">
    <div class="flex-col">
      <p>paragraph</p>
    </div>
    <div class="flex-col">
      <select name="exampleSelect" id="exampleSelect">
        <option value="" disabled="disabled" selected="">Select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
    </div>
    <div class="flex-col">
      <textarea id="textarea" rows="3">Textarea</textarea>
    </div>
  </div>
</div>
// for demo purpouses
.demo-container {
  display: flex;
  width: 100%;
  max-width: 600px;
  justify-content: space-between;
  align-items: flex-start;
}

External CSS

  1. https://assets.ubuntu.com/v1/d6050bd4-build.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.