title: Flexbox: Rows within single column
body: <p>I'm trying to modify a Squarespace contact form so that the input fields are on the right hand side while the title and description are stacked on top of each other on the left hand side. I imagine this is possible with flexbox but I'm struggling to figure out exactly how.</p>
  
  <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>.title, .description, .field-element {
    background-color: rgba(84, 97, 156, 0.2);
    padding: 20px;
    margin: 5px;
    border-radius: 4px;
    color: rgb(84, 97, 156);
    display: flex;
  }
  
  .description {
    color: rgba(84, 97, 156, 0.5);
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="field-list"&gt;
    &lt;div class="title"&gt;Your Name&lt;/div&gt;
    &lt;div class="description"&gt;Please provide your name&lt;/div&gt;
    &lt;div class="field-element"&gt;&lt;input placeholder="John Smith" /&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/mESMa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mESMa.png" alt="enter image description here"></a></p>