html - 見出しを 3 列に固定

Question

テキストリンクを含む 3 つの comumns が あります。同じ量のテキストがある場合、3 つの列は完全な順序のままです。列の1つに少量のテキストを書き込むと、次の結果リンクが表示されます

下のテキストの数に関係なく、アイコンとテキストを固定したままにしたい。どうやってやるの ？

これが私のコードです：

HTML

  <ul class="columns"> 

        <li class="clearfix"> 

            <span><img src="icon path" /><p>heading</p></span>

        <p>text below</p>

        </li> 

 </ul>

CSS:

.columns li{display: inline-block; width: 250px; margin-left: 100px;} 

.columns li:first-child{margin: 0;} 

.columns li img{float: left;} 

 .columns li span p{float: left; margin: 30px 0 0 10px; width: 150px; height: 30px; line-height: 1;}

.columns li  p{margin-top: 20px; } 

Answer 1

使用する

.columns {
    vertical-align: top;
}