How to achieve two inputs next to each other? - html

Question

every time when I have to work with Inputs this problem occurs.
My goal is to make a simple input form and achieve that 2 Inputs type number will be the same width, with small space between them in one line, just under "Description" input.
I've tried to add them to divs and apply Display:inline-block to them, but it didn't work. Now I've tried to apply display: flex on it a this is the result. Changing the width of input does not work. Thank you for your help.
.inputBox{
width: 30%;
padding: 2em;
text-align: center;
background-color: white;
border-radius: .3em;
}
.inputBox h3{
font-size: 2em;
font-weight: 300;
}
.inputBox input[type="text"]{
width: 100%;
padding: .5em;
margin: 1em 0;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
}
.inputBox input[type="number"]{
padding: .5em;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
width: 100%;
}
label{
display: block;
text-align: left;
}
.flex{
display: flex;
justify-content: space-between;
}
<div className="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div className="flex">
<div className="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div className="inputNumber">
<label>Minutes</label>
<input type="number" />
</div>
</div>

Answer 1

.inputBox{
width: 30%;
padding: 2em;
text-align: center;
background-color: white;
border-radius: .3em;
}
.inputBox h3{
font-size: 2em;
font-weight: 300;
}
.inputBox input[type="text"]{
width: 100%;
padding: .5em;
margin: 1em 0;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
}
.inputBox input[type="number"]{
padding: .5em;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
width: 100%;
}
label{
display: block;
text-align: left;
}
.flex{
display: flex;
justify-content: space-between;
}
.inputNumber{
flex-basis:48%;
}
<div class="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div class="flex">
<div class="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div class="inputNumber">
<label>Minutes</label>
<input type="number" />
</div>
</div>

Answer 2

If you want to keep inputBox's width at 30%, you can do something like this:
HTML
<div class="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div class="flex">
<div class="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div class="inputNumber second">
<label>Minutes</label>
<input type="number" />
</div>
</div>
</div>
CSS
.inputBox {
width: 30%;
padding: 2em;
text-align: center;
background-color: white;
border-radius: .3em;
}
.inputBox h3 {
font-size: 2em;
font-weight: 300;
}
.inputBox input[type="text"] {
width: 100%;
padding: .5em;
margin: 1em 0;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
}
.inputBox input[type="number"] {
padding: .5em;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
width: 100%;
}
label {
display: block;
text-align: left;
}
.flex {
display: flex;
flex-direction: row;
}
.inputNumber {
width: 50%;
}
.second {
margin-left: 5%;
}

Answer 3

two problems:
you are using className when you should be using class
change .inputBox width to 100%
also, you should ALWAYS try to post a working snippet that shows your problem. You will get back answers faster and ones that are more likely to work!
.inputBox{
width: 100%;
padding: 2em;
text-align: center;
background-color: white;
border-radius: .3em;
}
.inputBox h3{
font-size: 2em;
font-weight: 300;
}
.inputBox input[type="text"]{
width: 100%;
padding: .5em;
margin: 1em 0;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
}
.inputBox input[type="number"]{
padding: .5em;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
width: 100%;
}
label{
display: block;
text-align: left;
}
.flex{
display: flex;
justify-content: space-between;
}
<div class="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div class="flex">
<div class="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div class="inputNumber">
<label>Minutes</label>
<input type="number" />
</div>
</div>

Answer 4

you can use display: grid on your parent and modify the first child of grid to span across the first line like:
.parentContainer {
/* this will create the grid for us with 1rem gap between children */
display: grid;
grid-template-columns: repeat(1, 1fr),
grid-gap: 1rem;
}
.theChildElementYouWantToFullWidth {
grid-column: 1 / span 3;
}
for more information check this doc from MDN on Grid styling!