place divs next to each other and one below - html

Question

I am new to coding and I am trying to make a contact form with the Flex property so that I can place my "name" and "telephone number" horizontally next to each other and my "message" below. They must all be the same width.
I can´t figure it out with CSS.
below is my HTML code:
<div class="contactcontainer">
<form action="">
<div class="input">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>

Answer 1

You can achieve this by using flexbox.
And remember to use semantic markup for your forms, e.g. use label for labels instead of p tag.
.contactcontainer label {
display: block;
}
.input {
display: flex;
}
.input > div {
margin-right: 8px;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div>
<label for="firstname">First name</label>
<input id="firstname" type="text" name="firstname" placeholder="Your first name...">
</div>
<div>
<label for="pnumber">Phone number</label>
<input id="pnumber" type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<label for="message">Your message</label>
<textarea id="message" type="text" name="message" placeholder="type your message"></textarea>
</div>
</form>
</div>

Answer 2

Here is my solution, Its not perfect, but it will give u starting point
* {
box-sizing: border-box;
}
.contactcontainer {
width: 500px;
}
.input {
display: flex;
}
.message input {
display: block;
width: 100%;
}
.l,
.r {
flex: 1;
}
.l input,
.r input {
width: 100%;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="l">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="r">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>

Answer 3

If you want to achieve it using flex then
.input { display: flex; flex-direction: row; flex-wrap: wrap; }
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="inline">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="inline">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>

Answer 4

Using FlexBox
.input {
display: flex;
}
input {
width: 100%;
}
.hor{
flex: 1;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="hor">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="hor">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>
EDIT:
Use type=Number for number validation
.input {
display: flex;
}
input {
width: 100%;
}
.hor{
flex: 1;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="hor">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="hor">
<p>Phone number</p>
<input type="number" name="pnumber" placeholder="your phone number" min=1>
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>