List ul next to each other

Question

I am trying to make two lists with a title for each of them.

I need to make these two lists next to each other with a heading above each, I tried to use float:left, but that didn't work.

.list ul  
{
    
    float:left;
    list-style:none;
    
}

  <div class="list">
            <h1>Practices</h1>
            <ul>
                <li>Antitrust</li>
                <li>Appellate</li>
                <li>Copyright</li>
                <li>International Patent</li>
                <li>International Disputes</li>
                <li>Litigation & Arbitration</li>
            </ul>
            <h1>Industries</h1>
            <ul>
                <li>Agriculture & Energy</li>
                <li>Computer & Technology</li>
                <li>Environmental</li>
                <li>Life Sciences</li>
                <li>Medical Device</li>
            </ul>
        </div>

Run codeHide result

Answer 1

You can wrap <h1>both <ul>in <div>and set a property for this element float:left;.

Then set the .listproperty for the item vertical-align:top;.

.list
{  
    vertical-align:top;
}

.list ul  
{
    list-style:none;
}

.list .ul-wrapper  
{
    float:left;
}

<div class="list">
    <div class="ul-wrapper">
        <h1>Practices</h1>
        <ul>
            <li>Antitrust</li>
            <li>Appellate</li>
            <li>Copyright</li>
            <li>International Patent</li>
            <li>International Disputes</li>
            <li>Litigation & Arbitration</li>
        </ul>
    </div>
    <div class="ul-wrapper">
        <h1>Industries</h1>
        <ul>
            <li>Agriculture & Energy</li>
            <li>Computer & Technology</li>
            <li>Environmental</li>
            <li>Life Sciences</li>
            <li>Medical Device</li>
        </ul>
    </div>
</div>

Run codeHide result

Answer 2

Here you go sir:

<style>
    .ul-wrapper{float:left;}
</style>    
<div class="list">
    <div class="ul-wrapper">
        <h1>Practices</h1>
        <ul>
            <li>Antitrust</li>
            <li>Appellate</li>
            <li>Copyright</li>
            <li>International Patent</li>
            <li>International Disputes</li>
            <li>Litigation & Arbitration</li>
        </ul>
    </div>
    <div class="ul-wrapper">
        <h1>Industries</h1>
        <ul>
            <li>Agriculture & Energy</li>
            <li>Computer & Technology</li>
            <li>Environmental</li>
            <li>Life Sciences</li>
            <li>Medical Device</li>
        </ul>
    </div>
</div>