title: HTML align items and font color
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  div.div1  {
      align-items: center;
      border-style: solid;
      border: 1px solid red;
      display: flex;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="div1"&gt;
      &lt;img src="smiley.gif"&gt;
      One&lt;br&gt;Two&lt;br&gt;Three&lt;br&gt;&lt;font color="red"&gt;Four&lt;/font&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I use the above code to display an image and the text <code>One, Two, Three, Four</code> next to it. I am trying to make <code>Four</code> have a red color but it places it seperately from the other numbers, to the left. How can I fix this?</p>