Footer sort elements dynamically

I am trying to put my 3 footer elements in one single row.

The first element should take 50% of the space and the rest of the 2 element should take 25% each.

I have tried my best to sort those 3 elements in the right order. But I do not have any idea why my 3 elements are not in a single row and where the width of those 3 elements will be (50%, 25%, 25%)

I have created a jsfiddle here, where you can see the 3 elements are not sorted in a correct way.

Can anyone have an idea how to fix this issue !!!

CODE---

  <footer class="mdl-mega-footer" style="background: #ffffff">
    <div class="mdl-mega-footer--middle-section">
      <div class="mdl-grid">
        <div class="mdl-mega-footer--drop-down-section">
          <img src="public/images/office.jpg" alt="office" height="42" width="82">
          <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
          <ul class="mdl-mega-footer--link-list">
            <p> This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. </p>
          </ul>
        </div>
      </div>


      <div class="mdl-mega-footer--drop-down-section">
        <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
        <h1 class="mdl-mega-footer--heading">Bestsellers</h1>
        <ul class="mdl-mega-footer--link-list">
          <li><a href="#">• A4</a></li>
          <li><a href="#">• A5</a></li>
          <li><a href="#">• Pens</a></li>
          <li><a href="#">• Staplers</a></li>
        </ul>
      </div>
      <div class="mdl-mega-footer--drop-down-section">
        <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
        <h1 class="mdl-mega-footer--heading">We're social! </h1>
        <ul class="mdl-mega-footer--link-list">
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">LinkedIn</a></li>
        </ul>
      </div>
    </div>
</footer>