First question!

After trying several things I've found on here and other places - I can't get this to work.

I'm trying to make a few dropdown sections for potential clients to select the size of home they want photographs of and it displays the price according to their selection. I started out with an input box where the price would appear, which isn't necessary but thought it would make a nice spot for the price to go. I'm not sold on any one thing at this point.

Hopefully, there's a simple solution that I'm overlooking simply because I don't know what to search for. Any guidance would be greatly appreciated.

Here's a link (i hope) to codepen: https://codepen.io/jmsreya-the-animator/pen/dyzbLrK

<div class="service-col">
                <h3>Real Estate Photography</h3>                     
                    <select class="itemselect" id="itemselect">
                        <option disabled hidden selected>Select  Square Footage</option>
                        <option value="$100">Under 1,499sqft</option>
                        <option value="$125">1,500-1,999sqft</option>
                        <option value="$150">2,000-2,499sqft</option>
                        <option value="$175">2,500-2,999sqft</option>
                        <option value="$200">3,000-3,499sqft</option>
                        <option value="$240">3,500-3,999sqft</option>
                        <option value="$290">4,000-4,499sqft</option>
                        <option value="$340">4,500-4,999sqft</option>
                        </select> 
                        <h4>Price: 
                        </h4>
                     
                            <span class="output"></span>

.service-col{
flex-basis: 100%;
background: #fff3f3;
border-radius: 10px;
margin: 10px;
padding: 20px 12px;
box-sizing: border-box;
transition: 0.5s;
text-align: center;
}

h3{
text-align: center;
font-weight: 300;
margin: 10px 0;
}

.price-box{
border: 1px solid black;
width: 100px;
height: 25px;
}

.output{
color: black;
}