如何创建偶数列，其中左右对齐的项目

Question

1）我正在创建一个段落列表（2列计数），其中包含项目名称和价格。我希望物品左对齐，价格对齐（试图将价格跨度推到每个段落标签的最右侧）.I

2）列未正确对齐。如果你看到有一个间隙产生不均匀的列。我该如何纠正？

.mainDiv {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  width: 650px;
  background-color: green;
  padding-top: 0;
}

.thetag {
  width: 300px;
  background-color: red;
}

.leftAlign {
  text-align: left;
}

.rightAlign {
  text-align: right;
}

<div class="mainDiv">
  <p class="thetag"><span class="leftAlign">Bread:</span><span class= "rightAlign"> $3</span></p>
  <p class="thetag"><span class="leftAlign">Butter: </span><span class= "rightAlign"> $5</span></p>
  <p class="thetag"><span class="leftAlign">Milk: </span><span class= "rightAlign"> $3</span></p>
  <p class="thetag"><span class="leftAlign">Pasta:</span><span class= "rightAlign"> $5</span></p>
  <p class="thetag"><span class="leftAlign">Banana:</span><span class= "rightAlign"> $2</span></p>
  <p class="thetag"><span class="leftAlign">Apple: </span><span class= "rightAlign"> $1</span></p>
  <p class="thetag"><span class="leftAlign">Broccoli:</span><span class= "rightAlign"> $4</span></p>
  <p class="thetag"><span class="leftAlign">Potato: </span><span class= "rightAlign"> $3</span></p>
  <p class="thetag"><span class="leftAlign">Cucumber: </span><span class="rightAlign"> $4</span></p>
</div>