title: CSS Ignore sibling div
body: <p>I am trying to achieve something that looks fairly simple, but I am not sure there is a way to get it done with css.</p>
  
  <p>I have a list of tags that are displayed in a row. In the fiddle below, I fixed the size of the <code>tags-wrapper</code> to simulate the row wrapping.</p>
  
  <p>Now what I would like to do is add the input straight after the last tag (on the same row ). I am not sure how that is possible, as this would mean the input would be inside of the <code>tags-wrapper</code> div ( which, please correct me if I am wrong, but I think is only achievable with an absolute positioned div). </p>
  
  <p>Effectively what I would like to do is to ignore the <code>tags-wrapper</code> div and just place my input straight after the last <code>tag</code> div, but I can't change the html as I am developing with angular components and the input and the <code>tags-wrapper</code> are in different components.</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>.tags-wrapper{
    width: 210px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .tag{
    padding: 2px 3px;
    margin: 1px 2px;
    border: 1px solid black;
  }
  
  input{
    width: 60px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='tags-wrapper'&gt;
   &lt;div class='tag'&gt;Basketball&lt;/div&gt;
   &lt;div class='tag'&gt;Football&lt;/div&gt;
   &lt;div class='tag'&gt;Baseball&lt;/div&gt;
  &lt;/div&gt;
  &lt;input placeholder='Search'&gt;</code></pre>
  </div>
  </div>
  </p>