Why is this first in-line block anchored at the bottom?

Question

I have two blocks side by side: #abc and #buttons (the latter containing inline images).

I don't understand why the text "abcd" is floating on the bottom of the yellow div.

Question: Why isn't it, by default, on top left of #wrapper?

Side-remark: how to set this text "abcd" on top (vertically) or middle (vertically) of the yellow div?

* { margin: 0; padding: 0; }
#abc, #buttons { display: inline-block; }
#wrapper { background-color: yellow; }
ul li { display: inline; }

<div id="wrapper">
  <div id="abc">
  abcd
  </div>
  <div id="buttons">
    <ul>
      <li><a href="/1"><img src="https://via.placeholder.com/75x75"></a></li>
      <li><a href="/2"><img src="https://via.placeholder.com/75x75"></a></li>
      <li><a href="/3"><img src="https://via.placeholder.com/75x75"></a></li>
      <li><a href="/4"><img src="https://via.placeholder.com/75x75"></a></li>
    </ul>
  </div>
</div>

Answer 1

By default if you set attribute into inline it will have vertical-align attribute as baseline it default behavior

but if you want to make it middle align or top you can change it into middle

see this code

* { margin: 0; padding: 0; }
#abc, #buttons { display: inline-block; vertical-align: middle; }
#wrapper { background-color: yellow; }
ul li { display: inline; }

<div id="wrapper">
  <div id="abc">
  abcd
  </div>
  <div id="buttons">
    <ul>
      <li><a href="/1"><img src="https://via.placeholder.com/50x50"></a></li>
      <li><a href="/2"><img src="https://via.placeholder.com/50x50"></a></li>
      <li><a href="/3"><img src="https://via.placeholder.com/50x50"></a></li>
      <li><a href="/4"><img src="https://via.placeholder.com/50x50"></a></li>
    </ul>
  </div>
</div>

you can see css trick for more detail