How to align multi-line text using css? - css

Question

I am displaying client details, when I displayed address in mulitlines other information is not displaying from the begining.here is my code.
<div class="contactsheader">
<div class="contactheaderrow"> Address</div>
<div class="contactheaderrow"> Phone</div>
<div class="contactheaderrow"> Email</div>
</div>
<div class="contactsdata">
<div class="contactdatarowwrap"> {{names.address}}</div>
<div class="contactdatarow"> {{names.phone}}</div>
<div class="contactdatarow"> {{names.email}}</div>
</div>
my css is:
.contactsheader{
width: 80%;
height: 30px;
display: inline-block;
background-color: rgb(62,95,135);
font-family: 'Segoe UI';
padding-left: 1%;
}
.contactheaderrow{
width: 30%;
display: inline-block;
text-align:left;
font-family: 'Segoe UI';
}
.contactsdata{
width: 80%;
height: 30px;
display: inline-block;
font-family: 'Segoe UI';
padding-bottom: 2%;
padding-left: 1%;
}
.contactdatarow{
width: 30%;
display: inline-block;
text-align:justify;
font-family: 'Segoe UI';
}
.contactdatarowwrap{
width: 30%;
display: inline-block;
text-align:left;
font-family: 'Segoe UI';
word-wrap: break-word;
}
here address is displaying in 2 lines then phone and email are also displaying in second line. how to display them in begining line.

Answer 1

Im having trouble understanding your question, but I think you are asking about a vertical alignment property for a row of data where once cell wraps and forces the row to be higher than a single line? if so the solution is vertical-align: top;
add this to your CSS:
.contactdatarowwrap, .contactdatarow {
vertical-align:top;
}
Also, since you are essentially creating a table, a look at the display: table*; may be worth your time.