Ember Bootstrap 4.4.1 form input appearing below image

I have a component where the input box renders as an inline element so the form is split between the right of an image and below it, see image at the bottom. The outer div is a form group but it is not being enforced, the split is between the label and input type.

The breakpoints are implemented using ember-responsive

The Template

  <div class="image-left">
    <img src="assets/images/dreamstime_xxl_metallic_silver_tablet_q8.jpg" alt="taylor-swift-metallic-silver-tablet">
  </div>
  <div class="detail-right">
      <h2 class="no-padding-margin">FINDING TAYLOR SWIFT</h2>
    
      Jumbo view!
    
    
      Desktop view!
    
    
      Tablet view!
    
    
      Mobile view!
    
    <UserAction/>
  </div>



<h2>FINDING TAYLOR SWIFT</h2>
<div class="mobile-image">
  <img src="assets/images/dreamstime_xxl_metallic_silver_mobile_q8.jpg" alt="taylor-swift-metallic-silver-mobile">
</div>
<UserAction/>

The Component

<form class="outline-box">
  <div class="form-group">
    <h3 class=" white-outline form-heading">
      How it works
    </h3>
    <p class="white-outline form-text">
      Upload a photo of to find Taylor Swift or your best party outfit to find out how swiftie you are.
    </p>
    <label for="exampleInputEmail1" class="white-outline form-heading">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <p id="emailHelp" class="white-outline form-text">We'll never share your email with anyone else.</p>
  </div>
  <div class="input-group mb-3">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="inputGroupFile02">
      <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
    </div>
    <div class="input-group-append">
      <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
    </div>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label white-outline form-text" for="exampleRadios1">
      Find Taylor Swift
    </label>
  </div>
  <div class="form-check padding-bottom">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label white-outline form-text" for="exampleRadios2">
      Find Out How Swiftie You Are
    </label>
  </div>
  <button type="submit" class="btn btn-outline-light white-outline form-heading">Submit</button>
</form>

The CSS

@font-face {
  font-family:"Free Sans";
  src:url("/assets/fonts/FreeSans.eot?") format("eot"),url("/assets/fonts/FreeSans.woff") format("woff"),url("/assets/fonts/FreeSans.ttf") format("truetype"),url("/assets/fonts/FreeSans.svg#FreeSans") format("svg");
  font-weight:normal;font-style:normal;
}

@font-face {
  font-family:"Free Sans Bold";
  src:url('/assets/fonts/FreeSansBold.eot?') format("eot"), url('/assets/fonts/FreeSansBold.woff') format('woff'),url('/assets/fonts/FreeSansBold.ttf') format('truetype'),url('/assets/fonts/FreeSansBold.svg#FreeSansBold') format('svg');
  font-weight:normal;font-style:normal;
}

img {
  width: 100%;
}

body {
  height: 100%;
  background-color: #ffaaed;
  margin: 0;
}

.image-left {
  width: 50%;
  height: 100vh;
  float: left;
  overflow: hidden;
}

.detail-right {
  margin-left: 15%;
  height: 100vh;
  padding-top: 20px;
}

.left-image {
  width: 100%;
}

h2 {
  font-family: 'Free Sans Bold';
  color: white;
  text-align: center;
  font-size: 4vw;
}

h3 {
  font-family: 'Free Sans';
  color: white;
  text-align: center;
  font-size: 1em;
}

.no-padding-margin {
  margin: 0;
  padding: 0;
}

.mobile-image {
  max-height: 30vh;
  overflow: hidden;
}

.form-heading {
  font-family: 'Free Sans Bold';
}

.form-text {
  font-family: 'Free Sans';
}

.white-outline {
  color: white;
}

.outline-box {
border: 0px;
border-style: solid;
border-color: white;
padding: 10px;
}

.padding-bottom {
  padding-bottom: 10px;
}

.btn-outline-light:hover {
  color: #ffaaed;
}

Tablet rendering