Align side-by-side fields in a form

Question

I’m having trouble aligning 2 fields side by side in a form, the first case would be a select next to an input and, the other, two inputs.

Ex:

HTML:

<li>
    <label>Selecione algo</label>
    <select>
        <option disabled>Selecione Algo</option>
    </select>

    <label>Escreva algo</label>
    <input type="text"/>
</li>

<li>
    <input type="text"/>
    <div id="checkbox">
        <label> Marque algo
            <input type="checkbox"/> Marcado
        </label>
    </div>
</li>

Answer 1

Well, if that’s what I understood, if you want to align the text with the check box, you can’t close the tag on the text and then put the checkbox, you have to put the checkbox inside the text tag, and then close it... so they’re aligned. Test like this:

<li>
<label>Selecione algo</label>
<select>
<option disabled>Selecione Algo</option>


<label>Escreva algo</label>
<input type="text"/></select>
</li>

<li>
<label>Escreva algo</label>
<input type="text"
<div id="checkbox">
<label> Marque algo
<input type="checkbox"/></input>
</label>
</div>
</li>

Then just do the rest with CSS, if that’s what you want, there’s not much secret.

Answer 2

HTML

<form class="form">
  <div class="section">
    <div class="control-group">
      <label class="control-label">Selecione algo</label>
      <select class="control">
            <option disabled>Selecione Algo</option>
      </select>
    </div>

    <div class="control-group">
      <label class="control-label">Escreva algo</label>
      <input type="text" class="control"/>
    </div>

  </div>

  <div class="section">
    <div class="control-group">
      <label class="control-label">Escreva algo</label>
      <input type="text" class="control"/>
    </div>

    <div class="control-group">
      <label class="control-label">Marque algo</label>
      <label>
        <input type="checkbox"/>
        Concordo (checkbox)
      </label>
    </div>

  </div>
</form>

CSS

.form {
  display: flex;
  width: 550px;
  background-color: black;
  color: #CCC;
}

.form .section {
  flex-grow: 1;
  flex-direction: column;
  padding: 30px;
}

.form .section .control-group {
  margin-top: 10px;
}

.form .section .control-group .control {
  width: 100%;
}


.form .section .control-group .control-label {
  display: block;
  width: 100%;
  margin-bottom: 4px;
}

jsfiddle result: https://jsfiddle.net/Henrique_Araujo/kkhr5d59/

Answer 3

I did something like this, which is very close to what you want. Look if it helps you.

#formulario {
  background-color: #111;
  width: 60%; 
  margin-left: 20%;
  padding: 45px 15px;
  height: auto;
}

.campo {
  width: 50%;
  float: left;
  color: #c0c0c0;
}

.campo input {
  margin: 10px 1%;
  padding: 8px 1%;
  width: 90%;
}

.campo select {
  margin: 10px 1%;
  padding: 8px 1%;
  width: 94%;
}

<form id="formulario">

<div class="campo">
  <label>Selecione algo</label>
  <select value="Selecione(select)">
      <option disabled>Selecione Algo</option>
  </select>
</div>

<div class="campo">
    <label>Escreva algo</label>
    <input type="text" placeholder="Escreva algo (input)"/>
</div>

<div class="campo">
    <input type="text"  placeholder="Escreva algo (input)"/>
</div>

<div id="checkbox" class="campo2">
    <label> Marque algo</label>
    <input type="checkbox"> Marcado  
</div>

</form>