<div> меняет местоположение при вставке с контентом

Question

Я пытался создать макет из 3 блоков, причем первый блок является формой входа в систему, и каждый раз, когда я вставляю форму регистрации в свой первый блок, мой первый блок опускается ниже других блоков. Я хочу, чтобы все мои элементы делились на одной горизонтальной линии, причем первый содержит форму регистрации, есть идеи, как мне этого добиться?

Ниже я вставил свой код:

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background-color: white;
}

.firstmenu {
  display: inline-block;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: aquamarine;
}

.secondmenu {
  display: inline-block;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: red;
}

.thirdmenu {
  display: inline-block;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: yellow;
}

.bandau {
  border: 2px black solid;
  margin-top: 5px;
}

<div class="firstmenu">
  <div class="secondmenu">
    <form action="/action_page.php">
      <input class="bandau" type="text" name="FirstName" value="Įvesta reišmė">
      <input class="bandau" type="text" name="LastName" value="Įvesta reišmė">
    </form>
  </div>
</div>
<div class="thirdmenu"></div>

Answer 1

К сожалению, я не могу объяснить поведение, но если добавить firstmenu к классу position: relative; и position: absolute; к классу secondmenu, это решит проблему.

Посмотрите фрагмент во весь экран.

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background-color: white;
}

.firstmenu {
  display: inline-block;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: aquamarine;
  position: relative; /*added*/
}

.secondmenu {
  display: inline-block;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: red;
  position: absolute; /*added*/
}

.thirdmenu {
  display: inline-block;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: yellow;
}

.bandau {
  border: 2px black solid;
  margin-top: 5px;
}

<div class="firstmenu">
  <div class="secondmenu">
    <form action="/action_page.php">
      <input class="bandau" type="text" name="FirstName" value="Įvesta reišmė">
      <input class="bandau" type="text" name="LastName" value="Įvesta reišmė">
    </form>
  </div>
</div>
<div class="thirdmenu"></div>

Второй вариант для добавления position: relative; к классу secondmenu и position: absolute; к form, немного другой вариант и внешний вид.

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background-color: white;
}

.firstmenu {
  display: inline-block;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: aquamarine;
}

.secondmenu {
  display: inline-block;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: red;
  position: relative; /*added*/
}

.secondmenu form {
  position: absolute; /*added*/
}

.thirdmenu {
  display: inline-block;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: yellow;
}

.bandau {
  border: 2px black solid;
  margin-top: 5px;
}

<div class="firstmenu">
  <div class="secondmenu">
    <form action="/action_page.php">
      <input class="bandau" type="text" name="FirstName" value="Įvesta reišmė">
      <input class="bandau" type="text" name="LastName" value="Įvesta reišmė">
    </form>
  </div>
</div>
<div class="thirdmenu"></div>

Answer 2

ваше первое меню не должно содержать ваше второе меню, если вы хотите, чтобы они располагались рядом. С inline-block используйте float: left, чтобы получить желаемое выравнивание. также измените порядок первого и второго меню, если вы хотите, чтобы форма слева.

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background-color: white;
}

.firstmenu {
  display: inline-block;
  float:left;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: aquamarine;
}

.secondmenu {
  display: inline-block;
  float:left;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: red;
}

.thirdmenu {
  display: inline-block;
  margin: 20px;
  width: 300px;
  height: 325px;
  background-color: yellow;
}

.bandau {
  border: 2px black solid;
  margin-top: 5px;
}

  <div class="secondmenu">
    <form action="/action_page.php">
      <input class="bandau" type="text" name="FirstName" value="Įvesta reišmė">
      <input class="bandau" type="text" name="LastName" value="Įvesta reišmė">
    </form>
  </div>
  <div class="firstmenu">fm</div>

<div class="thirdmenu"></div>