3 ul are in one line , How justify that be start in top of div?

Question

I have 3 ul list showed in on line with bootstrap classes. each ul gets some links from db by Razor Engine foreach and numbers of these data is not equal . how can I justify they like this image ?

demo : http://jsfiddle.net/rygu8pqd/

                                        <ul style="text-align:center;list-style-type:none;">
                                            <li >
                                               <a>item1</a>
                                            </li>
                                            <li >
                                               <a>item1</a>
                                            </li>
                                        </ul>

                                </li>
                            </ul>
                            <ul style="border-right:2px red solid;border-left:2px red solid; text-align: center; list-style-type: none; display: inline-block" class="list-group ">


                                <li class="list-group-item">

                                        <ul style="text-align:center;list-style-type:none;">
                                            <li >
                                                <a>item2</a>
                                            </li>
                                            <li >
                                                <a>item2</a>
                                            </li>
                                             <li >
                                                <a>item2</a>
                                            </li>
                                        </ul>

                                </li>

                            </ul>
                            <ul style="text-align: center; list-style-type: none; display: inline-block" class="list-group">

                                <li class="list-group-item">

                                        <ul style="text-align:center;list-style-type:none;padding-top:15px;">
                                            <li>
                                               <a>item3</a>
                                            </li>
                                             <li>
                                               <a>item3</a>
                                            </li>
                                             <li>
                                               <a>item3</a>
                                            </li>
                                             <li>
                                               <a>item3</a>
                                            </li>
                                        </ul>

                                </li>
                            </ul>

Answer 1

Try this HTML code:

<ul>
    <li><a href="">Item one</a></li>
    <li><a href="">Item two</a></li>
    <li><a href="">Item three</a></li>
</ul>
<ul>
    <li><a href="">Item one</a></li>
    <li><a href="">Item two</a></li>
    <li><a href="">Item three</a></li>
    <li><a href="">Item four</a></li>
    <li><a href="">Item five</a></li>
</ul>
<ul>
    <li><a href="">Item one</a></li>
    <li><a href="">Item two</a></li>
</ul>

CSS Code:

ul{
    list-style: none;
}

ul{
    display:inline-block;
    vertical-align: top;
    border:1px solid black;
    padding-left:0px;
}

ul li{
    padding:10px;
}

ul li a{
    text-decoration: none;
}

Answer 2

Giving the following CSS works:

ul {vertical-align: top;}

Preview

Fiddle: http://jsfiddle.net/praveenscience/7bd1vh87/