JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<section id="golf">
            <div class="container">
                <div class="d-flex justify-content-start">
                    <div class="menu-image">
                        <img src="https://via.placeholder.com/975x678" class="img-fluid" alt="menu image">
                    </div>
                    <div class="menu-text">
                        <h2 class="main-title text-left">Golf Ter</h2>
                        <hr class="hr-style-left" />
                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">GOlfy</p>
                            <p class="menu-price">$200.00</p>
                        </div>
    
                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">GOlfy</p>
                            <p class="menu-price">$200.00</p>
                        </div>

                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">GOlfy</p>
                            <p class="menu-price">$200.00</p>
                        </div>

                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">Kimbap</p>
                            <p class="menu-price">P200.00</p>
                        </div>
                    </div>
                </div>
            </div>
    </section>

CSS

#golf{

 border-top: 3px solid green;
  border-bottom: 3px solid green;

}


.menu-container{
  width: 100%;
}


.menu-content{
   margin-top: 1.5rem;
   width: 50%;
}

.menu-text{
	padding: 90px;
	width: 50%;
}

p.menu-name{
	font-size: 1.3rem;
	text-align: left;
	text-transform: uppercase;
	color: #191919;
	font-weight: bold;

}

p.menu-price{
	margin-left: 9rem;
	font-weight: normal;
	color: #191919;
	font-size: 1.3rem;
}