Do you use the CSS class "form horizontal" to arrange your fields and labels?

<introEmbed body={<> You should align labels **next** to the inputs on medium and large displays and **above** inputs on small and extra-small displays. </>} />

Bootstrap makes this easy. Use the css class form-horizontal on your html form for it to use this behaviour by default.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input
        type="email"
        class="form-control"
        id="inputEmail3"
        placeholder="Email"
      />
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input
        type="password"
        class="form-control"
        id="inputPassword3"
        placeholder="Password"
      />
    </div>
  </div>
</form>

Figure: Example html using Bootstrap to get the above behaviour

See https://getbootstrap.com/docs/3.4/css/#forms-horizontal for more information.