get p tag to line up with header

Question

Hi guys so I am creating a simple fa icon and I want the heading of one p tag to line up with anther one, however for some reason I can't seem to get it to line up. I would like all the text below to line up with the title right below. So to be in the same line as title, not below the picture.

HTML:

<div class="section1">
   <div class="container" id="section1">
      <div class="row">
         <div class="col-5">
            <ul class="get_in">
            <li>
              <i class="fa fa-laptop"></i>
              <p>Title</p>
               <p>Web DevelopmentWeb DevelopmentWeb DevelopmentDevelopmentWeb DevelopmenDevelopmentWeb Developmen</p>
            </li>
            </ul>
         </div>
      </div>
   </div>
</div>

CSS:

.section1 .get_in li i {
    background: none repeat scroll 0 0 #373432;
    border-radius: 50%;
    color: white;
    height: 60px;
    line-height: 33px;
    margin-bottom: 10px;
    padding: 12px;
    text-align: center;
    width: 60px;
    font-size:34px;
}

.get_in p {
    display: inline-block;
    padding-left: 10px;
}

i {
  margin-right:6px;
}

.get_in li i:hover {
    background: #434343;
    color: white;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

fiddle link

Thanks again.

Answer 1

Add to your CSS:

li {
white-space: nowrap;
}

Answer 2

Changing the <p>'s display from display: inline-block; to display: inline; will move it up onto the same line:

.get_in p {
display: inline;
padding-left: 10px;
}

However, as the second <p> content is quite long it is dropping down onto two spread out lines because of the icon circle. Perhaps try moving the <i> out of the <ul> and adding a float: left;