How can I style a form with CSS?

Question

I'm trying to replicate a form design and I'm stuck on how to place the first name and last name labels and inputs side by side with the input field below each respective label but I can't seem to get around that. I have tried using display flex and grid on the container div and then placing each label and input in separate divs but it doesn't seem to work. The entire form tag has a display of flex on it already.

Here's my code:

.form-fill {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 50px;
  align-items: center;
  justify-content: center;
}

.name-fill {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

<div class="form-fill">
  <div class="name-fill">
    <label for="fName">First Name</label><br>
    <input type="text"><br>
    <label for="lName">Last Name</label><br>
    <input type="text"><br><br>
  </div>
</div>

Answer 1

You first need to wrap the label and input fields in a div. Then this can easily be done using display: flex;:

.name-fill {
  display: flex;
  gap: 10px;
}

<div class="form-fill">
  <div class="name-fill">
    <div>
      <label for="fName">First Name</label><br />
      <input type="text" />
    </div>
    <div>
      <label for="lName">Last Name</label><br />
      <input type="text" />
    </div>
  </div>
</div>

Or using display: grid;:

.name-fill {
  display: grid;
  grid-template-columns: repeat(2, 200px);
}

<div class="form-fill">
  <div class="name-fill">
    <div>
      <label for="fName">First Name</label><br />
      <input type="text" />
    </div>
    <div>
      <label for="lName">Last Name</label><br />
      <input type="text" />
    </div>
  </div>
</div>