Html 自助购物车

我正在尝试制作一个类似以下内容的购物车：

但我似乎不知道如何在左侧获得本地交付，而在右侧获得其内部的圆圈（带加号）

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>

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

下面是我得到的：

我已经尝试过在一行中创建两列，然后向右浮动圆圈按钮，但没有成功

遵循此代码

.circle{
边缘顶部：12px；
高度：25px；
宽度：25px；
边框：1px实心#45B4FE；
边界半径：50%；
显示：内联块；
/*颜色：红色*/
背景色：#cae3f9；
}
.circle plus{
位置：相对位置；
背景色：#45B4FE；
宽度：50%；
身高：12.5%；
左：25%；
最高：43.75%；
}
.垂直加{
位置：相对位置；
背景色：#45B4FE；
宽度：21.5%；
身高：399%；
左：40.75%；
前-127.5%；
}

更改交付

遵循此代码

.circle{
边缘顶部：12px；
高度：25px；
宽度：25px；
边框：1px实心#45B4FE；
边界半径：50%；
显示：内联块；
/*颜色：红色*/
背景色：#cae3f9；
}
.circle plus{
位置：相对位置；
背景色：#45B4FE；
宽度：50%；
身高：12.5%；
左：25%；
最高：43.75%；
}
.垂直加{
位置：相对位置；
背景色：#45B4FE；
宽度：21.5%；
身高：399%；
左：40.75%；
前-127.5%；
}

更改交付

---

我只使用引导类

也许这个能帮上忙：）

.content包装器{
背景色：#ccf5ff；
}

本地交货

我只使用引导类

也许这个能帮上忙：）

.content包装器{
背景色：#ccf5ff；
}

本地交货

这正是我要找的，只是我想在最右边的专栏末尾交货。。但是谢谢你！：）这正是我要找的，除了我想在最右边专栏的末尾交货。。但是谢谢你！：）