CSS divs not horizontally aligned properly [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
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="contacto#test.com">
</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="contacto#test.com">
</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.

Answer 2

Why is there a . before the input?
Also, I highly recommend not using vh or pixels. You should go with em. Without doing everything, you should probably try to do something like that, with flexbox.
#redcontact {
width: 100%;
height: 100%;
font-size: 15px;
line-height: 1.5;
background-color: #000;
color: #fff;
}
form {
display: flex;
padding: 2em;
.contacthor {
display: flex;
flex-direction: column;
width: 50%;
padding: 0 2em;
input,
textarea {
color: #C5B358;
background-color: transparent;
margin-left: 1em;
margin-bottom: 1em;
padding: 0.5em 1em;
width: auto;
display:block;
}
input {
border: 0;
}
textarea {
border: 1px solid grey;
border-radius: 3px;
}
}
}

Answer 3

I have made a grid. See if you are looking for somewhat similar thing.
https://codepen.io/kalpeshshende/pen/qJjomO
form{
display:grid;grid-gap:10px;
grid-template-columns:1fr 2fr;
}
.holder{
max-width:600px;
margin:auto;
background:black;
color:#C5B358;padding:10px;
}
.contacthor{
display:grid;grid-gap:10px;
}
textarea{
height:100px;
}
input[type=submit]{
width:120px;
}
p{
padding:0px;
}
input[type=text]{
background:black;
color:;border:none;
}
Markup :
<body>
<div class="holder">
<form action="">
<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="contacto#test.com">
</div>
<div class="contacthor">
<label for="Mensaje">Mensaje</label>
<textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
<input type="submit" value="enviar">
</div>
</form>
</div>
</body>

Answer 4

Try adding vertical-align: top; to contracthor.