title: Move text on the same line in css
body: <p>My issue is that in the footer if the second div has less text.. the 3rd div is a lot higher than the 4th div when the screen is smaller. I want to put a fixed height on the first div.</p>
  
  <p>I have tried:</p>
  
  <pre><code>.footer ul {
    height: 100px;
  }
  </code></pre>
  
  <p>but it overlaps the text</p>
  
  <p><a href="https://i.stack.imgur.com/q266t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q266t.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div class="footer"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-3 col-sm-4 col-xs-6"&gt;
          &lt;ul&gt;
            &lt;li class="Heading"&gt;TEST&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="col-md-3 col-sm-4 col-xs-6"&gt;
          &lt;ul&gt;
            &lt;li class="Heading"&gt;TEST&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test Account&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="col-md-3 col-sm-4 col-xs-6"&gt;
          &lt;ul class="padding-none"&gt;
            &lt;li class="Heading"&gt;SUBSCRIBE TO NEWSLETTER&lt;/li&gt;
            &lt;input type="text" id="sub-input" name="subscribe" placeholder="Enter your email address" /&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="col-md-3 col-sm-4 col-xs-6"&gt;
          &lt;ul&gt;
            &lt;li class="Heading"&gt;Test&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/d81v1k01/" rel="nofollow noreferrer">Demo</a></strong></p>