<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>on the left and the circle (with the plus) inside of it on the right hand side.</h2> <div class="container"> <p style="float: left">Change Delivery</p> <div class="circle"> <div class="circle-plus"> <div class="vertical-plus"> </div> </div> </div> </div> </div> </div>

.circle{ margin-top: 12px; height: 25px; width: 25px; border: 1px solid #45B4FE; border-radius: 50%; display: inline-block; /* color: red; */ background-color: #cae3f9; } .circle-plus{ position: relative; background-color: #45B4FE; width: 50%; height: 12.5%; left: 25%; top: 43.75%; } .vertical-plus{ position: relative; background-color: #45B4FE; width: 21.5%; height: 399%; left: 40.75%; top: -127.5%; }