CSS divs not horizontally aligned properly

Question

This is probably a stupid question, but it has been driving me crazy the whole day. I need both divs with the class of contacthor to be aligned on the top, but not forcing them by using margin-top: -x or etc. Here is an image of the issue.

Also, Im new to web design so if I have useless code please explain.

Thanks.

#redcontact {
  margin-bottom: 0;
  padding-left: 5vh;
  font-size: 15px;
  line-height: 30px;
  background: black;
}

.contacthor {
  display: inline-block;
}

form > .contacthor > .input {
  color: #C5B358;
  font-size: 15px;
  background-color: black;
  margin-top: 0;
  margin-left: 1vh;
  margin-bottom: 1vh;
  height: 30px;
  width: 190px;
  display: block;
}

.contacthor > textarea {
  color: #C5B358;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  width: 60vh;
  height: 25vh;
  background: black;
  border: 1px;
  border-style: solid;
  border-radius: 3px;
  border-color: grey;
  padding-left: 4px;
  margin-top: 0;
  margin-bottom: 1vh;
  margin-left: 1vh;
}

<div id="redcontact">
  <form action="action_page.php">
    <div class="contacthor">
      <label for="name">Nombre</label>
      <input class="input" type="text" name="name_user" placeholder="test">
      <label for="org">Empresa</label>
      <input class="input" type="text" name="org" placeholder="test">
      <label for="mail">Mail</label>
      <input class="input" type="text" name="mail" placeholder="[email protected]">
    </div>
    <div class="contacthor">
      <p>Mensaje</p>
      <textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
      <input type="submit" value="enviar">
    </div>
  </form>
</div>

Answer 1

I would agree with Chere's answer in that you should be using something like CSS Grid or Flexbox. However, if you want to stay simple for this example, or just want to know why your code isn't working, here is a solution:

#redcontact {
  margin-bottom: 0;
  padding-left: 5vh;
  font-size: 15px;
  line-height: 30px;
  background: black;
}

.contacthor {
  display: inline-block;
}

form>.contacthor>.input {
  color: #C5B358;
  font-size: 15px;
  background-color: black;
  margin-top: 0;
  margin-left: 1vh;
  margin-bottom: 1vh;
  height: 30px;
  width: 190px;
  display: block;
}

.contacthor>textarea {
  color: #C5B358;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  width: 60vh;
  height: 25vh;
  background: black;
  border: 1px;
  border-style: solid;
  border-radius: 3px;
  border-color: grey;
  padding-left: 4px;
  margin-top: 0;
  margin-bottom: 1vh;
  margin-left: 1vh;
}

.contacthor>p {
  margin-bottom: 5px;
  margin-top: 0;
  margin-bottom: 1vh;
  margin-left: 1vh;
}

.contacthor>input[value=enviar] {
  display: block;
  margin-top: 0;
  margin-bottom: 1vh;
  margin-left: 1vh;
}

/* ===== Styles to fix example ===== */

label, p {
  color: white;
}

/* ===== Styles to answer your question ===== */

.contacthor {
  vertical-align: top;
}

<div id="redcontact">
  <form action="action_page.php">
    <div class="contacthor">
      <label for="name">Nombre</label>
      <input class="input" type="text" name="name_user" placeholder="test">
      <label for="org">Empresa</label>
      <input class="input" type="text" name="org" placeholder="test">
      <label for="mail">Mail</label>
      <input class="input" type="text" name="mail" placeholder="[email protected]">
    </div>
    <div class="contacthor">
      <p>Mensaje</p>
      <textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
      <input type="submit" value="enviar">
    </div>
  </form>
</div>

The main thing to take away from this is the addition of vertical-align: top. Here is a similar question and here is the documentation for the vertical-align property.

Note: I think there may have been some CSS missing, so the snippet looks a bit odd and I had to make a couple of unrelated changes.