How to set two fieldsets side by side in html?

Question

How would I set two field sets side by side to get something like this? What I am going for

This is what I have so far: Fieldset reaches end of page

Answer 1

You can use Bootsrap's grid system.

Please check this out for demo.

 <main class="container">
    <form>
      <ul class="row">
        <li class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <fieldset>
            <label class="label">Firstname</label>
            <input type="text" value="Firstname" class="form-input form-control" />
          </fieldset>
           <fieldset>
            <label class="label">Lastname</label>
            <input type="text" value="Lastname" class="form-input form-control" />
          </fieldset>         
        </li>
        <li class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
           <fieldset>
            <label class="label">Username</label>
            <input type="text" value="Username" class="form-input form-control" />
          </fieldset>
           <fieldset>
            <label class="label">Password</label>
            <input type="password" value="Password" class="form-input form-control" />
          </fieldset>          
        </li>
      </ul>      
    </form>
  </main>