Btukfyl

.leftbox {

		width: 50%;

		padding: 5px;

		float: left;

		

	}



	.rightbox {

		width: 50%;

		padding: 5px;

		float: right;

		

	}

<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">

	<h2 class="popup-header">Rotation Forms</h2>



	<div class="newRotation-sections">





		<h3>Details</h3>

		<div class="newRotation-section-1" style="margin-top: 10px;">



			<div class="leftbox">

				<span>Mob</span> <br />

				<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />



				<span>Paddock</span> <br />

				<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />

			</div>

			<div class="rightbox">



				<span>Date</span> <br />

				<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />

			</div>



		</div>

		

		<h3>Fencing options</h3>

		

		<div class="newRotation-section-2" style="margin-top: 10px;">

			<div class="leftbox">



				<span>Available Today</span> <br />

				<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />



				<span>Paddock Allocation %</span> <br />

				<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />



			</div>

			<div class="rightbox">

				<span>Required Result</span> <br />

				<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />

			</div>



		</div>

		<h3>Assign As Task</h3>

		  </div>

 </div>

</div>

/* Roboto Font */

@import url('https://fonts.googleapis.com/css?family=Roboto');



html, body {

  height: 100%;

}



body {

  font-family: 'Roboto', sans-serif;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>





<div class="container p-5">

  <div class="row">

    <div class="col-sm-12">

      <h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>

      <h4 class="mb-3 mt-3">Details</h4>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="mob">Mob</label>

        <input type="text" class="form-control" id="mob" placeholder="Enter Mob">

      </div>

      <div class="form-group">

        <label for="paddock">Paddock</label>

        <input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">          

      </div>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="date">Date</label>

        <input type="date" class="form-control" id="date" placeholder="Enter Date">          

      </div>      

      <h4 class="mb-3 mt-3">Fencing Options</h4>

      <div class="form-group">

        <label for="avail">Available Today</label>

        <input type="text" class="form-control" id="avail" placeholder="NaN">          

      </div>

      <div class="form-group">

        <label for="allocation">Paddock Allocation %</label>

        <input type="number" class="form-control" id="allocation" placeholder="100">          

      </div>

      <div class="form-group">

        <label for="result">Required Result</label>

        <input type="text" class="form-control" id="result" placeholder="NaN">          

      </div>      

    </div>

  </div>

  <div class="row">

    <div class="col-sm-12 col-md-6">

      <h4 class="mb-3 mt-3">Assign As Task</h4>

      <div class="form-group">

        <label for="assign">Assign to</label><br>

        <button type="submit" class="btn btn-success btn-md" id="assign">Add</button>       

      </div>

      <div class="form-check">

        <input class="form-check-input" type="checkbox" value="" id="checked">

        <label class="form-check-label" for="checked">I want to see this too.</label>

      </div>

      <button type="button" class="btn btn-success btn-md">Save</button>

      <button type="button" class="btn btn-success btn-md">Cancel</button>

    </div>    

  </div>

</div>