JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container c1">
<div class="ul left"></div>
<div class="up"></div>
<div class="ur right"></div>
</div>

<div class="container">
<div class="body">Рабочий эскиз<br>А я хочу<br>А я хочу А5<br><br><br>-A5 Кончились, остались только A8</div>
</div>

<div class="container c3">
<div class="left dl"></div>
<div class="down"></div>
<div class="dr right"></div>
</div>

CSS

div {margin:0;}

.container {overflow:hidden; width:100%; position:relative;}
.c1, .c3 {height:16px;}
.up, .down, .left, .right {border:0 solid black; background:white;}
.up, .down {height:15px; min-height:15px;}
.right, .left {width:15px; min-width:15px; height:100%;}

.down {border-top-width:1px;}
.up {border-bottom-width:1px;}
.left {border-right-width:1px;}
.right {border-left-width:1px;}

.ul, .dl, .ur, .dr {position:absolute; height:15px;}
.ul, .dl {left:0;}
.ur, .dr {right:0;}
.dl, .dr {bottom:0;}
.ul, .ur {top:0;}

.body {background:#DDD; padding:5px; overflow:hidden;border:0 solid black; border-width:0 1px; margin:0 15px;}