Добавление текста и изображений разного размера в одну строку с помощью Foundation 5

веб-дизайн новичок здесь...

Я начал свой первый проект веб-дизайна и решил использовать Foundation 5. У меня возникло несколько проблем с верхней частью моего веб-сайта. К сожалению, я не могу опубликовать изображение здесь о том, как я хочу, чтобы он так плохо пытался и описал это как можно лучше.

Я хочу, чтобы "Телефон" и "Электронная почта" были больше, чем номер телефона и адрес электронной почты, но все в одной строке. Тогда мне нужны социальные значки справа от страницы, снова все выровненные.

Мне сложно помещать все в одну строку и иметь разные стили для каждого персонажа.

Вот что я имею в данный момент:

<div class="row hide-for-small">

  <div class="large-4 columns"><p class"contact-top">Phone <span class="smaller">- 0757776856</span> <span class="contact-top">Email<span class="smaller">- [email protected]</span></p></div>

      <div class="large-1 columns">
          <img class="social-btn" src="img/facebook-btn.png" alt="Facebook">
          </div>
      </div>

      <div class="large-1 columns">
            <img class="social-btn" src="img/twitter-btn.png" alt="Twitter">
          </div>
      </div>

      <div class="large-1 columns">
            <img class="social-btn" src="img/pin-btn.png" alt="Pintrest">
          </div>
      </div>

      <div class="large-1 columns">
            <img class="social-btn" src="img/google-btn.png" alt="Google+">
          </div>
      </div>

  </div>

И CSS:

.contact-top {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-variant: bold;
display: inline;

}

.smaller {
font-family: 'Open Sans', sans-serif;
font-size: 12px;

}

Я надеюсь, что это имеет какой-то смысл, очень сложно описать без изображений! благодаря