Как выровнять два divs бок о бок

Question

У меня есть приложение, где у меня есть две коробки, которые я должен использовать в качестве стационарного номера с кодом std, но я не могу выровнять два бокса рядом, это мой код plese chk ..

<div class="row"> 

    <label for="lbl-01"><bean:message key="tml.registration.label.landNumber"/><span class="formElementRequired">* </span> +91</label> 
    <div class="phcontainer"> 
     <div class="phleft"><html:text property="landLineNumber" styleId="landLineNumberId" styleClass="text" maxlength="11"/></div> 
     <div class="phright">yep</div> 
    </div>  

    <font class="help_text">Max. 11 characters</font> 
     <div class="errorDivClass"> 
     <%--<logic:messagesPresent property="landLineNumber"> 
       <font color="red"><html:errors property="landLineNumber" /></font> 
      </logic:messagesPresent> --%> 
     </div> 
</div> 

Это мой CSS

.phcontainer { 
/* width: 80%; */ 
overflow: hidden; 

} 
.phleft, .phright { 
float: left; 
/* width: 40%; */ 
margin: 0 5%; 

}

Answer 1

удалить с плавающей точкой, и дать им display:inline-block; также добавить скрипку, если и нужна дополнительная помощь

.phleft, .phright { 
    margin:0 5%; 
    display:inline-block; 
} 

Answer 2

Это то, что вам нужно?

HTML

<div class="div_a"> 
     <p>Contact Name:</p> 
     <p>Peter</p> 
     <p>John </p> 
    </div> 
    <br /> 
    <div class="Div_b"> 
     <p>Number:</p> 
     <p>555-6052</p> 
     <p>555-6021 </p> 
    </div> 

CSS

.div_a { 
    color: #333; 
    width: 150px; 
    height: 150px; 
    float: left; 
    background-color:#069; 
    color: #FFF; 
    padding-left:15px; 
} 
.Div_b { 
    color: #036; 
    background-color:#333; 
    height: 150px; 
    width: 150px; 
    position:absolute; 
    margin-left:175px; 
    color: #FFF; 
    padding-left:15px; 
    margin-top:-18px; 
} 

Demo JSFIDDLE