title: HTML big text and have 2 lines of small text next to it?
body: <p>I want the text to look like:</p>
  <p><a href="https://i.stack.imgur.com/icBS6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/icBS6.jpg" alt="Ideal Page" /></a></p>
  <p>My code is</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>.number {
    font-size: 32px;
    display: inline;
  }
  
  .top {
    display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="top"&gt;
    &lt;p class="number" id="num"&gt;12&lt;/p&gt;
    &lt;p style="display: inline;" id="month"&gt;Oct&lt;/p&gt;
    &lt;p style="display: inline;" id="year"&gt;2021&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>with default text size being 16px, and the big 12 in the picture is 32px.
  I currently have it that it shows <a href="https://i.stack.imgur.com/b6Byb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b6Byb.png" alt="Current" /></a> How do I make the 2021 text appear on a new line, while having the 12 text be to the left of these 2 lines? Note, removing the inline makes them appear below the 12.</p>