Kevin Powell - Community•16mo ago

how do i put two out of three inputs on the same line?

how do i put two out of three inputs on the same line while the third is on the second one? codepen: https://codepen.io/staticoly/pen/dywJxOb (though i don't know how much of a help that would be)

staticoly

CodePen

dywJxOb

...

5 Replies

Tok124 (CSS Nerd)•16mo ago

use grid

nahOP•16mo ago

shit i only know how to use flexbox

Tok124 (CSS Nerd)•16mo ago

https://codepen.io/tok124/pen/VwqQKrY

Tim

CodePen

VwqQKrY

...

nahOP•16mo ago

god bless

13eck•16mo ago

<form class="input-row">
  <input type="text" id="input1" name="input1">
  <input type="text" id="input2" name="input2">
  <input type="text" id="input3" name="input3">
</form>

<form class="input-row">
  <input type="text" id="input1" name="input1">
  <input type="text" id="input2" name="input2">
  <input type="text" id="input3" name="input3">
</form>

*, *::before, *::after {
  box-sizing: border-box;
}
.input-row {
  width: min(60ch, 100% - 4em);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
}
input {
  flex:1 1 45%;
}

*, *::before, *::after {
  box-sizing: border-box;
}
.input-row {
  width: min(60ch, 100% - 4em);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
}
input {
  flex:1 1 45%;
}

Grid also works. But I'm more familiar/comfortable with flexbox

Gaming

Programming

how do i put two out of three inputs on the same line?