JSFiddle - React, Tailwind, and code Playground

HTML

<div id="new_map">
                    <div id="map_nbc_pop">
                        <div class="nm_bubbletop1"></div> 
                        <div id="nm_bubblebg">
                            <ul class="nm_left" >
                            <li><a href="#">Chetwynd</a></li>
                                <li><a href="#">Fort St James</a></li>
                                <li><a href="#">Fort St John</a></li>
                            </ul>
                            <ul class="nm_right">
                            <li><a href="#">McBride</a></li>
                                <li><a href="#">Prince George</a></li>
                                <li><a href="#">Prince Rupert</a></li>
                            </ul>
                        </div>
                        <div class="nm_bubblebelow1"></div>
                    </div>
</div>

CSS

#new_map { position: static }
#map_nbc_pop { position: absolute }
.nm_bubbletop1, .nm_bubblebelow1 {  position:absolute; height:15px; background-color:#ccc; width:100%; }
.nm_bubbletop1 { top:0px; }
.nm_bubblebelow1 { bottom:0px; }
#nm_bubblebg { margin:15px 0px; }