JSFiddle - React, Tailwind, and code Playground

HTML

<div class='box'>
    <div id="left_side"><a href="">&larr;</a></div>
    <div id="right_side"><a href="">&rarr;</a></div>    
    <div id="content">
      <p>something</p>
      <p>more something</p>
    </div>
</div>

CSS

.box {
    border: 2px solid blue;
    margin: 20px;
    position: relative;
}
#left_side {
  border: black solid 1px;
  position: absolute;
  left: 0;
  width: 10em;
  text-align: center;
    margin: 10px;
  border-radius: 8px 8px 8px 8px;
  }

#right_side {
  border: black solid 1px;
  position: absolute;
  right: 0;
  width: 10em;
    margin: 10px;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
  }

#content {
  background-color: #ccc;
  margin: 10px 180px;
  padding: 30px;
  border:5px;
  border-radius: 8px 8px 8px 8px;
  }