title: HTML CSS Align items of a div inline
body: <p>I have the following html code:</p>
  
  <pre><code>  &lt;div class="transparent" style="display: inline; text-align: justify; height: 80px;"&gt;
      &lt;a style="padding: 4px"&gt;About Cilliai&lt;/a&gt;
      &lt;a style="padding: 4px"&gt;Advertise&lt;/a&gt;
      &lt;a style="padding: 4px"&gt;Signage Manager&lt;/a&gt;
      &lt;a style="padding: 4px"&gt;Signage Solutions&lt;/a&gt;
      &lt;a style="padding: 4px"&gt;Career&lt;/a&gt;
      &lt;a style="padding: 4px"&gt;Resources&lt;/a&gt;
      &lt;a style="padding: 4px"&gt;Contact&lt;/a&gt;
      &lt;a style="padding: 4px"&gt;Legal&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which gives the following output
  <a href="https://i.stack.imgur.com/x0Jkd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x0Jkd.png" alt="output"></a></p>
  
  <p>Everything looks as expected but the I want the text signage solutions to be in the same line and shift legal to the next line. How do I accomplish that?</p>