How to align label above the input?

September 22, 2022

Attached is my code. I want to align the label above the item in a similar way as shown in the pic. Kindly help me out.

form {
  background-color: white;
  width: 800px;
}


/* label,input{
        display:flex;
        flex-direction:row;
      }
    form input{
        display: flex;
        flex-direction: column;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid white;
    } */

form button {
  color: white;
  background-color: rgb(9, 63, 228);
  width: 150px;
  padding: 10px;
  border-radius: 5px;
}

<form>
  <label for="go">Where You Want to go</label>
  <input type="text" id="go" name="go" placeholder="Search your location" required minlength="6">
  <br>
  <label for="indate">Check-in</label>
  <input type="date" id="indate" name="indate" placeholder="Add Date" required><br>
  <label for="outdate">Check-out</label>
  <input type="date" id="outdate" name="outdate" placeholder="Add Date" required><br>
  <button>Explore Now</button>
</form>

I am not getting how to style it.

>Solution :

Minimum css

label {
  display: block;
}

input, button {
  display: inline-block;
}

.input-container, button {
    display: inline-block;
}

<form>
  <div class="input-container">
    <label for="go">Where You Want to go</label>
    <input type="text" id="go" name="go" placeholder="Search your location" required minlength="6">
  </div>
  <div class="input-container">
    <label for="indate">Check-in</label>
    <input type="date" id="indate" name="indate" placeholder="Add Date" required>
  </div>
  <div class="input-container">
    <label for="outdate">Check-out</label>
    <input type="date" id="outdate" name="outdate" placeholder="Add Date" required>
  </div>
  <button>Explore Now</button>
</form>