JSFiddle - React, Tailwind, and code Playground

HTML

<div data-station-display style="position:relative;">
  <div class="stationOverlay textbox-border" data-stationid="6" style="top: 337px; left: 0px;">
    <div class="textbox yellow" >Station Format: Obstacle Course/Private Lesson</div>
  </div>
</div>
<p>
How I think it should look:
</p>
<div data-station-display style="position:relative;">
  <div class="stationOverlay textbox-border" data-stationid="6" style="top: 337px; left: 0px;">
    <div class="textbox yellow" style="width:218px;">Station Format: Obstacle Course/Private Lesson</div>
  </div>
</div>

CSS

[data-station-display] {
  border: 1px solid #000000;
  width: 490px;
  height: 367px;
  background-color: #e0e0ee;
}

.stationOverlay {
  position: absolute;
  left: 0;
  top: 0;
}

[data-station-display] .textbox-border {
  display: inline-block;
  margin: auto;
  border-radius: 4px;
  padding: 2px;
  background: #B7B7B7;
  background: linear-gradient(to bottom, #FFFFFF 0%, #808080 100%);
}

[data-station-display] .textbox {
  display: inline-block;
  max-width: 245px;
  padding: 1px;
  border-radius: 4px;
  font-family: verdana, tahoma, Arial;
  font-size: 9.5px;
  font-weight: bold;
  opacity: 0.6;
  cursor: default;
}