title: What is the best way to align content left and right in a header while using flexbox?
body: <p>I'm struggling to find the right keywords to solve this.</p>
  
  <p>Here is my code that works:</p>
  
  <blockquote>
    <p>HTML</p>
  </blockquote>
  
  <pre><code> &lt;div class="windowTopBar"&gt;
     &lt;span style="display: inline-block;"&gt;&lt;b&gt;System Properties&lt;/b&gt;&lt;/span&gt;
     &lt;span style="float: right;"&gt;[?][X]&lt;/span&gt;
   &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>CSS</p>
  </blockquote>
  
  <pre><code> .windowTopBar {
     background: linear-gradient(90deg, #000080, #1084D0);
     color: white;
     height: 2em;
     min-height: 2em;
     align-items: center;
     margin: 0;
   }
  </code></pre>
  
  <p>This works and floats the "System Properties" to the left and the "what will be two img buttons" to the right.</p>
  
  <p>If I put the span styles into classes, it stops working. Why?</p>
  
  <p>If I put "display: flex;" into the parent div, it also stops working? Why? I really want to use display flex. I've been messing with this for quite a long time actually.</p>
  
  <p>My favourite solution so far, was to do display: flex and justify-content: flex-end on the parent (while using two child divs instead of spans), but I couldn't figure out how to float the "System Properties" over to the left side.</p>
  
  <p>I am trying to make it responsive, so I would appreciate if someone could help me understand what the bestpractice is and defintely help me understand why span style property works in html but not as a css class.</p>
  
  <p>To be extra clear, if i do:</p>
  
  <blockquote>
    <p>HTML</p>
  </blockquote>
  
  <pre><code> &lt;span class="test1"&gt;blah1&lt;/span&gt;
   &lt;span class="test1"&gt;blah2&lt;/span&gt;
  </code></pre>
  
  <blockquote>
    <p>CSS</p>
  </blockquote>
  
  <pre><code> .test1 {
     display: inline-block;
   }
   .test2 {
     float: right;
   }
  </code></pre>
  
  <p>It doesnt work. Help please! :) Forgive me if I'm asking too much. This is my first ever question, but I've been lurking for years.</p>