title: Align 2 items side-by-side in a flex column
body: <p>I am very new to flex. But I'm loving it so far. The question I have is, how do I align two items side-by-side when the parent has <code>flex-direction: column;</code>?</p>
  
  <p>I have pasted my HTML and Sass code here along with screenshots.</p>
  
  <p>I have a form like so:</p>
  
  <pre><code>// manage.html
  &lt;div class="form2" hidden&gt;
    &lt;div class="message" hidden&gt;&lt;/div&gt;
    &lt;form id="updateUserForm" action="https://someaction.com" method="POST"&gt;
      &lt;label class="userInfo"&gt;&lt;/label&gt;
      &lt;input type="text" name="userFirstName" class="userFirstName" placeholder="First Name"&gt;
      &lt;input type="text" name="userLastName" class="userLastName" placeholder="Last Name"&gt;
      &lt;input type="text" name="subTag" class="subTag" placeholder="Title, benefits, companies, expertise"&gt;
      &lt;input type="text" name="subLocation" class="subLocation" placeholder="City, state, zipe code or country"&gt;
      &lt;a href="./manage.html" class="cancelLink"&gt;Cancel&lt;/a&gt;
      &lt;button type="submit " class="updateButton"&gt;&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That is styled like so:</p>
  
  <pre><code>// style.scss
  .form2 {
      #updateUserForm {
          display: flex;
          flex-direction: column;
      }
      label {
          text-align: center;
      }
      input {
          border-style: solid;
          border-color: $black;
          color: $black;
          font-size: 16px;
          padding: 10px 14px;
          text-align: left;
          margin: 4px 2px;
      }
      input:focus::-webkit-input-placeholder {
          color: transparent;
      }
      input:focus:-moz-placeholder {
          color: transparent;
      }
      input:focus::-moz-placeholder {
          color: transparent;
      }
      input:focus:-ms-input-placeholder {
          color: transparent;
      }
      a,
      button {
          border: none;
          color: $white;
          background-color: $blue;
          padding: 12px 16px;
          text-align: center;
          text-decoration: none;
          font-size: 16px;
          margin: 4px 2px;
          display: inline-block;
          align-self: flex-start;
          cursor: pointer;
      }
  }
  </code></pre>
  
  <p>Here is the output:</p>
  
  <p><a href="https://i.stack.imgur.com/9pFyk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9pFyk.png" alt="enter image description here"></a></p>
  
  <p>I would like to align 'Cancel' link and 'Reactivate' button side by side. I tried the following:</p>
  
  <pre><code>// style.scss
  a {
    align-self: flex-start;
  }
  button {
    align-self: flex-end;
  }
  </code></pre>
  
  <p>This only slides the elements to left and right respectively without being on the same line. Here is the output I wish to get:</p>
  
  <p><a href="https://i.stack.imgur.com/6gZMY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6gZMY.png" alt="enter image description here"></a></p>
  
  <p>Any suggestions on how to reach my expected output?</p>