Bootstrap Shopping Cart

Question

I am trying to make a shopping cart similar to this:

But I can't seem to figure out how to get Local Delivery on the left and the circle (with the plus) inside of it on the right hand side.

HTML:

<div class="col" style="width:342px;height:69px;">
<p class="text-left center-block" style="width:451px;padding:-22px;">Local Delivery<button class="btn btn-primary align-items-center" type="button" id="cartHaz" style="padding:1px;margin:15px;"></button></p>

CSS:

element.style {
  width:518px;
  height:68px;
}

.d-flex {
  display:-ms-flexbox!important;
  display:flex!important;
}

.form-row {
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-right:-5px;
  margin-left:-5px;
}

div {
  resize:both;
  height:auto;
}

and here's what I get:

I've already tried creating two columns in a single row and then floating the circle button to the right but it didn't work.

Answer 1

Follow this code

.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%;
	}

<p style="float: left">Change Delivery</p>
	<div class="circle">
		<div class="circle-plus">
			<div class="vertical-plus">	
			</div>	
		</div>
	</div>

Hope it solves your problem !!