title: Complex CSS layout – flexbox or grid?
body: <p>I'm looking to achieve a complex layout (see Figures 1-4 below) where I have three main elements: title, side element, and tags. The title should span the entire width, the side element should float to the right and span the entire height of the container, and then the tags (which there could be many) should wrap under the title.</p>
  
  <pre><code> ___________________________   ____
  |                           | |    |
  |   lorem ipsum dolor ...   | |    |
  |___________________________| |    |
   ______   _______   ______    | XX |
  |      | |       | |      |   |    |
  |  ab  | |  cde  | |  fg  |   |    |
  |______| |_______| |______|   |____|
  </code></pre>
  
  <p><strong>Prerequisites:</strong></p>
  
  <ol>
  <li>The <code>.title</code> should be as <strong>wide</strong> as possible</li>
  <li>The <code>.side</code> and <code>.tag</code>'s should be only as wide as their content, so as <strong>narrow</strong> as possible.</li>
  <li>Sizes of any of the elements are unknown, thus I <strong>can't use fixed widths or percentages</strong> (except 100% obviously).</li>
  <li>The solution should work at any container width.</li>
  <li><code>.side</code> and <code>.tag</code>'s are <strong>optional</strong>, so the solution should work if they are missing.</li>
  <li>All element are siblings, meaning <strong>I can't wrap all <code>.tag</code>'s in a <code>div</code></strong>, for example.</li>
  <li>The <code>.side</code> element always comes last in the source code, hence the <code>order</code> property below.</li>
  </ol>
  
  <p>Please see the use cases that I'm looking to cover:</p>
  
  <ul>
  <li><a href="https://i.stack.imgur.com/0H1GQ.png" rel="nofollow noreferrer">Figure 1: Title, side element, and a few tags</a></li>
  <li><a href="https://i.stack.imgur.com/H1ASm.png" rel="nofollow noreferrer">Figure 2: Title, side element, and more tags</a></li>
  <li><a href="https://i.stack.imgur.com/ZrVuC.png" rel="nofollow noreferrer">Figure 3: Only title and a couple of tags</a></li>
  <li><a href="https://i.stack.imgur.com/92NUM.png" rel="nofollow noreferrer">Figure 4: Only title and the side element</a></li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }
  .title {
    order: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }
  .side, .tag {
    flex-grow: 0;
    flex-basis: auto;
  }
  .side {
    order: 2;
  }
  .tag {
    order: 3;
  }
  
  /* sample styling - ignore */
  .container { width: 100%; }
  .title, .tag, .side { padding: 30px; margin: 5px; color: white; font-family: Arial; font-size: 24px; }
  .title { background: coral; }
  .tag { background: cornflowerblue; }
  .side { background: mediumseagreen; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Case 1&lt;/h2&gt;
  &lt;div class='container'&gt;
    &lt;div class='title'&gt;
      Lorem ipsum dolor sit amet...
    &lt;/div&gt;
    &lt;div class='tag'&gt;abc&lt;/div&gt;
    &lt;div class='tag'&gt;def&lt;/div&gt;
    &lt;div class='tag'&gt;ghi&lt;/div&gt;
    &lt;div class='side'&gt;XX&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;Case 2&lt;/h2&gt;
  &lt;div class='container'&gt;
    &lt;div class='title'&gt;
      Lorem ipsum dolor sit amet...
    &lt;/div&gt;
    &lt;div class='tag'&gt;abc&lt;/div&gt;
    &lt;div class='tag'&gt;def&lt;/div&gt;
    &lt;div class='tag'&gt;ghi&lt;/div&gt;
    &lt;div class='tag'&gt;jkl&lt;/div&gt;
    &lt;div class='tag'&gt;mno&lt;/div&gt;
    &lt;div class='tag'&gt;pqr&lt;/div&gt;
    &lt;div class='side'&gt;XX&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;Case 3&lt;/h2&gt;
  &lt;div class='container'&gt;
    &lt;div class='title'&gt;
      Lorem ipsum dolor sit amet...
    &lt;/div&gt;
    &lt;div class='tag'&gt;abc&lt;/div&gt;
    &lt;div class='tag'&gt;def&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;Case 4&lt;/h2&gt;
  &lt;div class='container'&gt;
    &lt;div class='title'&gt;
      Lorem ipsum dolor sit amet...
    &lt;/div&gt;
    &lt;div class='side'&gt;XX&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>My question</strong></p>
  
  <p>What is the best way to achieve this complex flexible layout? Can I use flexbox to make all of the use cases above functional, or should I look more into grid?</p>
  
  <p>Thank you!</p>