Html: css: align div elements horizontally

Question

I am trying to align all my html elements horizontally inside a div and am able to partially do it. This is what I'm trying to replicate:

<div style="width: 100%">
  <div style="width:50%; height:50px; float: left; border: thin solid black;">
    <div style="width: 50%; float: left;">
      <label class="left">Start Date: </label>
      <input class="right" type="text" name="startDate" size="150px">
    </div>
    <div style="margin-left:52%;">
      <label class="left">Start Time: </label>
      <input class="right" type="text" name="startTime" size="150px">
    </div>
  </div>

  <div style="height:50px; margin-left: 52%; border: thin solid black;">
    <div style="width: 50%; float: left;">
      <label class="left">End Date: </label>
      <input class="right" type="text" name="endDate" size="150px">
    </div>
    <div style="margin-left:52%;">
      <label class="left">End Time: </label>
      <input class="right" type="text" name="endTime" size="150px">
    </div>
  </div>
</div>

I can't seem to get it to work where the end time's size is 150 px.

Any help is appreciated.

score 1 · Accepted Answer · edited Jul 28 '21 at 15:40

Just use flexbox

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.flex fieldset {
  display: flex;
  flex: 1;
}

.flex input {
  width: 150px;
}

<fieldset>
  <legend>Date and Time</legend>

  <div class="flex">
    <fieldset>
      <legend>From</legend>
      <input type="text" class="input" placeholder="Date">
      <input type="text" class="input" placeholder="Time">
    </fieldset>

    <fieldset>
      <legend>To</legend>
      <input type="text" class="input" placeholder="Date">
      <input type="text" class="input" placeholder="Time">
    </fieldset>
  </div>
</fieldset>

Html: css: align div elements horizontally

1 Answers1