html 다른 높이의 엘리먼트들을 수평으로 정렬하기

<audio controls></audio>
<label>abcde</label>

위 코드는 서로 높이가 다른 오디오 컨트롤과 래이블을 옆으로 나란히 출력하는데 이때 엘리먼트들의 아래를 기준으로 한다. 높이가 낮은 래이블을 오디오 컨트롤의 중간에 맞춰 아래를 띄우려고 아래와 같이 해 봐야 작동하지 않는다.

<label style="margin-bottom: 10px;">abcde</label>

아래와 같이 float 스타일을 적용해야 마진이 먹는다.

<style>
    *
    {
        float: left;
    }
</style>

<audio controls></audio>
<label style="margin-top: 17px;">abcde</label>