HTML DIV setups for Text location-CodePudding

While trying to set up a menu I am wondering about the proper approach for this type of design.--The style should look like the following---

Added Photo to show--

So I have tried a few different options here is where i am at code wise... i have tried to use multiple divs, but what would be the easiest way to achieve the above layout? i can get it to be center in this format but i cannot get the text to be the above style in a grid layout.

My assumption is it is my HTML but i have tried as much as writing the price in its own DIV to attempt to manipulate position but that does not line up at all.

.menu {
  width: 100%;
  height: auto;
  background-image: url("../img/staff-bartender.jpg");
  background-color: rgb(0, 4, 17);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  color: white;
}

<article >
  <h2>Food & Drink</h2>
  <div >
    <div>
      <h4 >Drinks</h4>
      <p >Drinks Soda $2 Coke products
      </p>
      <p >Coffee $2 Cream and sugar</p>
      <p >Beer $5 Delicious and refreshing</p>
      <p >Wine $5 Light and fruity</p>
      <p >Cocktail $10</p>
      <div>
        <h4 >Appetizers</h4>
        <p >fried Pickles $6 Golden and crispy with tang!</p>
        <p >Buffalo Wings $10 5 wings per order</p </div>
      </div>
    </div>

CodePudding user response：

Try this code.

.menu {
        width: 100%;
        height: auto;
        background-image: url("../img/staff-bartender.jpg");
        background-color: rgb(0, 4, 17);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
        color: white;
    }
    .menuitems_outer{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .menuitems{
        width: 50%;
        max-width: 30%;
        text-align: left;
    }
    .menuitems h5{
        display: flex;
        justify-content: space-between;
    }

<article >
    <h2>Food & Drink</h2>
    <div >
        <div >
            <h4 >Drinks</h4>
            <h5 >Drinks Soda <span>$2</span></h5>
            <p>Coke products</p>
            <h5 >Coffee <span>$2</span></h5>
            <p>Cream and sugar</p>
            <h5 >Beer <span>$5</span></h5>
            <p>Delicious and refreshing</p>
            <h5 >Wine <span>$5</span></h5>
            <p>Light and fruity</p>
            <h5 >Cocktail <span>$10</span></h5>
        </div>
        <div >
            <h4 >Appetizers</h4>
            <h5 >Fried Pickles <span>$6</span></h5>
            <p>Golden and crispy with tang!</p>
            <h5 >Buffalo Wings <span>$10</span></h5>
            <p>5 wings per order</p>
        </div>
    </div>
</article>