JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="box-width"><span>200</span></div>
  <div class="box-height"><span>100</span></div>
  
</div>

SCSS

*{
box-sizing: border-box;
  
}
.box{
  width:200px;
  height:100px;
  border:1px solid #000;
  position:relative;;
 .box-width{
   
    position:absolute;
    left:0;
    right:0;
    bottom:-3rem;
    text-align:center;
   border-top:1px solid #000;
     &::after{
       left: -1px;
        position: absolute;
        content: '';
        display: block;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #000;
        transform: translateY(-50%);
  }
       &::before{
      
      right: -1px;
      position: absolute;
      content: '';
      display: block;
      top: 0;
      bottom: 0;
      width: 1px;
      background: #000;
      transform: translateY(-50%);
  }
 }
 .box-height{
    
    position:absolute;
   
    right:-3rem;
    bottom:0;
    top:0;
    text-align:center;
    border-left:1px solid #000;
   
   
   display: flex;
    justify-content: center;
    flex-direction: column;
   span{
     transform:rotatez(90deg)
     
   }
    &::after{
           left: 0;
    position: absolute;
    content: '';
    display: block;
    top: 0;
    height: 1px;
    background: #000;
    transform: translateX(-50%);
    right: 0.25rem;

  }
       &::before{
      
           left: 0;
    position: absolute;
    content: '';
    display: block;
    bottom: 0;
    height: 1px;
    background: #000;
    transform: translateX(-50%);
    right: 0.25rem;
  }
   
 }
  
    
}