Элемент встроенного блока падает при наведении?

Question

Я пытаюсь настроить очень простой анимационный эффект, при котором наведение курсора на анимацию оживляет form элемент рядом с ним от 0 до 100% width используя переход CSS. Вот скрипка для справки. У меня возникают две проблемы: во-первых, в этом случае <p> элемент и <form> элементы не выстраиваются вертикально, несмотря на то, что display:inline-block а также vertical-align:top, Во-вторых, при наведении на расширение form элемент до 100%, он падает ниже <p> элемент; Кто-нибудь знает, что здесь происходит?

    #wrapper {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        text-align: left;
        vertical-align: top;
        border: 1px solid #000;
        margin: 0;
        padding: 0;
    }
    #wrapper p {
        font-size: 16px;
        display: inline-block;
        vertical-align: top;
        text-transform: uppercase;
        background-color: rgba(255, 255, 255, 0.5);
        padding: 0.5em 1em;
        cursor: pointer;
    }
    #wrapper:hover form#access {
        width: 100%;
    }
    form#access {
        display: inline-block;
        width: 0%;
        margin: 0;
        padding: 0;
        overflow:hidden;
        -webkit-transition: width 1s ease-in-out;
        -moz-transition: width 1s ease-in-out;
        -o-transition: width 1s ease-in-out;
        transition: width 1s ease-in-out;
    }
    form#access input {
        font-size: 18px;
        display: inline-block;
        vertical-align: top;
        padding: 0;
        margin: 0;
        border: none;
        max-width: 100px;
    }

    <div id="wrapper">
      <p>Enter code:</p>
      <form id="access">
        <input placeholder="code" id="access-code" name="access-code" type="text" tabindex="1" required>
      </form>
    </div>

Answer 1

Вы устанавливаете свою форму на 100% ширины при наведении, что займет всю ширину его родителя. Вы можете либо уменьшить этот процент так, чтобы он помещался на одной строке с абзацем, либо просто добавить это в #wrapper:

    white-space: nowrap;

Answer 2

Потому что вы установили form#access в 100% которая нуждается во всей ширине #wrapper container,

Это должно работать вместо:

#wrapper:hover form#access {
    width: 100px;
}

---

Также рассмотрите возможность использования display: inline-flex на обертке, так что вам не нужно устанавливать display: inline-block и легче центрировать оба элемента.

Я обновил вашу скрипку здесь