CSS text starting from a wrong place - html

Question

This might be a stupid question, but it has been troubling me a lot.
I have made 4 boxes and each box should have the text starting from a same line, but sometimes (when the text is less), it starts from the bottom.
Here's the image displaying it:
Ideally, it should start from the top and go till the bottom. Like this:
What changes should I make in my CSS code?
CSS :-
.show-text {
margin-left: 264px;
float: left;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-2 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-3 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-4 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
My JSFiddle :- http://jsfiddle.net/xa0obvyr/

Answer 1

Because you are using inline-block, you need to specify vertical alignment if the default value doesn't suit you. In this case, you need
show-text-col-4 {vertical-align: top;}
However, your setup is less than ideal. Rather than floating the first time with a large left margin, I'd recommend you use a centered wrapper element instead, and style each of the columns in the same way.

Answer 2

This is what you need? with one CSS class and automatic 1/4 width of each column.
Please check the demo: http://jsfiddle.net/sk1rqxeo/
.show-text-col {
float: left;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 18px;
color: #606060;
width:24.5%;
display: inline-block;
}

Answer 3

You will need to set width to <p> tag
FIDDLE DEMO
.show-text-col-3 p{
width:200px;
}