How to display divs side by side inside a list (inline-block doesn't work) while vertically align the right div (vertical-align doesn't work)

Question

I have a list of items where an item is some text and a button. I want text to be aside the button. I used inline-block but it doesn't work.

Note that I want text to wrap too.

  <ul>
    <li>
      <div class="inline-block">
        Side by side
      </div>
      <div class="inline-block">
        Side by side
      </div>
    </li>
    <li>Profile</li>
    <li>Logout</li>
  </ul>

styles:

.inline-block {
  display: inline-block;
}


ul {
  position: absolute;
  padding: 4px 0;
  top: 28px;
  right: 0;
  width: 80px;

  background-color: white;
  border: 1px solid hsl(0, 0%, 80%);
  border-radius: 4px;
  box-shadow: 0 3px rgba(0, 0, 0, 0.05);
  list-style-type: none;
}

Codepen: http://codepen.io/TimGThomas/pen/oXzpXL

Edit

I achieved the expected result. There is a lot of wrapped text and a button aside. I want button to vertically align in the middle, I tried vertical-align:middle but it doesn't work.

  <ul style="width: 300%">
    <li>
      <div>
        <div class="inline-block text-mid">
         A lot of wrapped text
         A lot of wrapped text
         A lot of wrapped text
        </div>
        <div class="inline-block" style="vertical-align:middle;">
          In the middle
        </div>
      </div>
    </li>
  </ul>

style:

.text-mid {
  width: 100px;
}

New Codepen: http://codepen.io/anon/pen/wajWBV

Answer 1

Give bigger UL width:

ul {
  width: 280px;
}

CodePen: http://codepen.io/anon/pen/wajWBV

Answer 2

我认为您最好使用<span>代替<div> ，默认将<span> display属性设置为inline