JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="line"></div>
</div>
<div class="container" id = "ri">   
</div>
<div class="container" >   
</div>
<div class="container" id = "second">
    <div class="line"></div>
</div>

CSS

#ri{
    margin-left:300px;
    margin-top:-300px;
}
div.container
{
    width: 300px;
    margin-right:10px;
    height: 150px;
    background-color: #aaa;
    padding-top: 150px;
    border:1px solid;

}
#second{
     width: 300px;
    height: 150px;
    background-color: #aaa;
    padding-top: 150px;
    position:relative;
    margin-left:300px;
    margin-top:-300px;

}
div.line
{
    position: relative;
    z-index: 1;
    left: -61px;
    width: 423px;
    height: 1px;
    background-color: #000;
    transform: rotate(45deg);
}