Как я могу исправить ошибки выравнивания и зависания этих <div>элементов?

Question

[Исправлено] Я пытаюсь выровнять эти два элемента <div> при наведении на них курсора, но пока это не сработало. Я пытался использовать display: inline-block, но он все еще не работает, как показано. Другая вещь в коде состоит в том, что область наведения неверна. Есть идеи, как решить эти проблемы? Вот мой код:

/* Please note that this is updated CSS and not
 * the original */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
* {
  font-family: "Montserrat", sans-serif;
  background-color: #121212;
  transition: 0.5s;
  overflow: hidden;
}

#c {
  position: absolute;
  left: calc(4vw + 4vh);
  top: calc(4vw + 4vh);
  transition: 0.5s;
  display: inline-flex;
  cursor: default;
  /* V3 of the CSS */
  overflow: hidden;
}

#ct {
  overflow: hidden;
  width: 0;
  top: 0;
  left: 0;
  right: 0;
  transition: 0.5s ease;
  /* display: inline-block; Removed in Revision 3 */
}

#c:hover #ct {
  width: 100%;
}

#ct span {
  white-space: nowrap;
  transition: inherit;
  display: inline-block;
  font-size: calc(2vw + 2vh);
  color: rgb(100, 100, 100);
  padding-top: 3.5px;
}

#h {
  position: relative;
  display: inline-block;
  transition: 0.5s;
  font-size: calc(2vw + 2vh);
  color: rgb(100, 100, 100);
  background: rgb(50, 50, 50);
  padding: 3.5px;
  border-radius: 5px;
}

<div id='c'>
  <div id='ct'>
    <span>lorem ipsum dolor...&nbsp;&nbsp;</span>
  </div>
  <span id='h'>?</span>
</div>

Обновление: ошибка выравнивания исправлена ​​с <div> и <span>, но ошибка наведения остается. Обновление 2: ошибки полностью исправлены. Спасибо Здравко Перникову!

Answer 1

Используйте display: inline-flex в #c, а также добавьте align-items: center, чтобы выровнять их по вертикали.

А для наведения - добавьте overflow: hidden и удалите display: inline-block; из #c и в #ct изменить width: 0% на width: 0