JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 200px; width: 100px;" class="remote-button">
        <span style="color: white; background-color: #009900;" class="onoff">Node red line that may overflow the 1234 width of the button<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off</span>
</div>

CSS

body {
padding: 10px;
background-color: #003;
}

.remote-button.onoff {
  height: 100%;
  opacity: 1;
  color: white;
}

.remote-button {
  border-radius: 10px;
  height: 100%;
  overflow: hidden;
}

.remote-button:hover {
  border-radius: 10px;
  border: 1px solid red;
}

.remote-button span {
  border-radius: 10px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
}