title: Text top align on CSS
body: <p>I have created an HTML framework to display a top banner containing an image a centered title and a clock, below it, there is a stage area to display some graphs and images.</p>
  
  <p>The problem I am encountering is that when I increase the font size of the title in the banner, I am left with some white space above, and with increasing the font size, the text disappears (I have set the containing div to hide the overflow). Ideally, this spacing could be reduced with some property.</p>
  
  <p>I tried searching for aligning the text to the top, but unfortunately I just cannot find it! The behaviour is present even when the text and its div are the only things in the document.</p>
  
  <p>Link to the jsFiddle with the whole page <a href="https://jsfiddle.net/gjq549n0/2/" rel="nofollow">here</a>
  Link to the isolated div <a href="https://jsfiddle.net/5dar7ssm/" rel="nofollow">here</a></p>
  
  <p>Is there a property I am missing, or another trick to move the text upwards?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="banner" style="width:100vw;height:10vh;overflow:hidden"&gt;
    &lt;div id="bannerLeft" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:red"&gt;
      img
    &lt;/div&gt;
    &lt;div id="bannerMiddle" style="width:70vw;height:100%;overflow:hidden;float:left;background-color:blue"&gt;
      &lt;p style="text-align:center;font-size: 2.5em;"&gt;Staged Title&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="bannerRight" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:green"&gt;
      &lt;p id="timeNow" style="font-size: 2.5em;text-align:center"&gt;
        10:00
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="stage" style="width:100vw;height:85vh;overflow: hidden;background-color:yellow"&gt;
    Stage is managed with JS
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>