Putting two <ul>'s next to each other

Question

I'm having some trouble with putting two ul's next to each other.

div.container > nav > ul > li > div {
  width: 100%;
  margin-top: 13px;
  padding: 25px;
  position: absolute;
  border-bottom: 1px #222222 solid;
  background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
  width: 200px;
  border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
  padding: 3px;
}
div.container > nav > ul > li > div > h4 {
  width: 242px;
  color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
  text-decoration: none;
  color: #222222;
  font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
  color: #d60000;
}

<div>
  <h4>Website</h4>
  <ul>
    <li>
      <a href=''>Basic</a>
    </li>
    <li>
      <a href=''>Premium</a>
    </li>
    <li>
      <a href=''>Without Hosting</a>
    </li>
    <li>
      <a href=''>Without Database</a>
    </li>
    <li>
      <a href=''>Multiple Website's</a>
    </li>
  </ul>
  <h4>Hosting</h4>
  <ul>
    <li>
      <a href=''>Hosting</a>
    </li>
    <li>
      <a href=''>Host a personal site</a>
    </li>
    <li>
      <a href=''>Host an existing website</a>
    </li>
  </ul>
</div>

The problem that I'm getting now is that the <ul>'s drop down under each other, where I like them to be inline.

Has anyone a proper solution for the problem. I searched through other's questions about this topic, all methods did not work.

Answer 1

1 method: you need 2 div

<div>
    <h4>Website</h4>
     <ul>
     <li>
         <a href=''>Basic</a>
     </li>
     <li>
      <a href=''>Premium</a>
     </li>
   </ul>
 </div>

 <div>
    <h4>Hosting</h4>
      <ul>
           <li>
             <a href=''>Hosting</a>
           </li>
           <li>
            <a href=''>Host a personal site</a>
           </li>
        </ul>
 </div>

Css

div {
  display:inline-block;
  float:left;

}

Example: https://jsfiddle.net/d2q6kbnw/

2nd method, make your h and ul tag into inline tag using css...

display:inline-block; float:left;

Answer 2

Wrap each ul into a parent div and apply display: inline-block; and vertical-align: top; to them.

Here's a Fiddle to demonstrate.