Aligning inline-block elements horizontally

Question

I am trying to achieve the following:

1. I try to get the divs to be displayed as inline-block and the remaining width (spaces) should be distributed evenly around the divs (as in with margin: auto).

2. I try to get the divs TOP and not the BOTTOM border to be align to each other, leaving the specified margin top and bottom for any div below or above each other based on it's height. Just like the image attached

(https://i.sstatic.net/Y3Jwl.jpg)

[Example: see codepen ] css:

#container {
  min-height: 200px;
  margin: 0;
  padding: 10px;
  border: 2px solid green;
}

#container div {
  border: 2px solid red;
  padding: 10px;
  display: inline-block;
  /* must be inline-block, not BLOCK */
  margin: 5px auto;
  /* AUTO works fine if set to display:block; and not display:inline-block; */
  width: 120px;
  /* the longer the item name, the width should auto expand to fit */
  margin: 2px auto;
}

<section id="container">
  <div>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three </li>
      <li>Item four</li>
      <li>Item five</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three </li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six </li>
      <li>Item seven</li>
      <li>Item eight</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three </li>
      <li>Item four</li>
      <li>Item five</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three </li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six </li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three </li>
      <li>Item four</li>
      <li>Item five</li>
    </ul>
  </div>

</section>

Answer 1

For inline-block items, you can use vertical-align: top to align siblings to the top.

For evenly spaced widths, you can define a width value percentage within #container div or tell the parent #container to be display: flex (which will also align the items to the top).

#container{
  min-height: 200px;
  margin:0;
  padding:10px;
  border:2px solid green;
}
#container div {
  border:2px solid red;
  padding:10px; 
  display: inline-block;
  margin:5px auto;
  width:120px;
  margin:2px auto;
  vertical-align: top; /* use on inline-items */
}

<section id="container">
    <div>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three </li>
            <li>Item four</li>
            <li>Item five</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three </li>
            <li>Item four</li>
            <li>Item five</li>
            <li>Item six </li>
            <li>Item seven</li>
            <li>Item eight</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three </li>
            <li>Item four</li>
            <li>Item five</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three </li>
            <li>Item four</li>
            <li>Item five</li>
            <li>Item six </li>
        </ul>
    </div>
    <div>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three </li>
            <li>Item four</li>
            <li>Item five</li>
        </ul>
    </div>

</section>