I am trying to align the items on the menu down one side of it and the prices down the other side of the menu. I have gotten the items to line up into one single column, but the prices do not line up, they are all displayed differently depending on how long the item is.

I tried messing with the inline block, the padding, and width but they all just throw the whole page off. Or they items just go to opposite edges of the page with no space inbtween the word and the edge of the page. Im not really sure what to do. Also sorry if my question is confusing, i am very new at this.

.menu-page {
  background-color: white;
  width: 80%;
  margin: 15px auto;
  max-width: 500px;
}

.food {
  padding-bottom: 5px;
}

.meat, .price {
  display: inline;
}

.meat {
  padding-left: 30px;
}

.price {
  margin-left: 55%;
}

.toppings {
  text-align: center;
}

.description {
  font-style: italic;
  color: darkgray;
  font-size: 11px;
  padding-left: 30px;
  padding-right: 15px;
}

<body>
  <div >
    <h1>Zackie's Tacos</h1>
    <p >Award winning tacos!</p>
    <hr>
    <div >
      <h2>Tacos</h2>
        <h5 >Chicken</h5> 
        <p >2.50<p>
        <h5 >Beef</h5>
        <p >2.75<p>
        <h5 >Carne Asada</h5>
        <p >3.15<p></p>
        <h5 >Carnitas</h5>
        <p >3.15<p></p>
        <h5 >Barbacoa</h5>
        <p >3.15<p></p>
        <h5 >Shrimp</h5>
        <p >3.50<p></p>
        <h5 >Fish</h5>
        <p >3.50<p></p>
      <h4 >Toppings</h4>
        <p >lettuce, tomato, cilantro, onion, raddish, jalapeno, black or pinto bean, cheese, sour cream, any signature sauce.</p>```

CodePudding user response：

Use Flexbox

Here is a solution that uses flexbox.

You can wrap each item into a div tag that has display: flex. This will bring both your h5 and p element into the same line.

To shift both the items into respective ends, you can provide justify-content: space-between to the div(.item) element.

Note: Be aware that h5 and p elements has its own margin by default. Hence, I have reassigned the margin as margin: 1rem 0; to .meat and .price.

<style>
.menu-page {
  background-color: white;
  width: 80%;
  margin: 15px auto;
  max-width: 500px;
}

.food {
  padding-bottom: 5px;
}

.item {
  display: flex;
  justify-content: space-between;
}

.meat {
  padding-left: 30px;
}

.meat, .price {
  margin: 1rem 0;
}

.toppings {
  text-align: center;
}

.description {
  font-style: italic;
  color: darkgray;
  font-size: 11px;
  padding-left: 30px;
  padding-right: 15px;
}

</style>
<body>
  <div >
    <h1>Zackie's Tacos</h1>
    <p >Award winning tacos!</p>
    <hr>
    <div >
      <h2>Tacos</h2>
      <div ><h5 >Chicken</h5> <p >2.50</p></div>
      <div ><h5 >Beef</h5><p >2.75</p></div>
      <div ><h5 >Carne Asada</h5><p >3.15</p></div>
      <div ><h5 >Carnitas</h5><p >3.15</p></div>
      <div ><h5 >Barbacoa</h5><p >3.15</p></div>
      <div ><h5 >Shrimp</h5><p >3.50</p></div>
      <div ><h5 >Fish</h5><p >3.50</p></div>
      <h4 >Toppings</h4>
        <p >lettuce, tomato, cilantro, onion, raddish, jalapeno, black or pinto bean, cheese, sour cream, any signature sauce.</p>```

CodePudding user response：

The inline CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode, so when you margin-left on price class It will not align all p tag vertically.

You can use flexbox or grid to divide it into 2 cols i.e:

<p >
   <span>Chicken</span>
   <span>2.50</span>
</p>

.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}