JSFiddle - React, Tailwind, and code Playground

HTML

<div style='position:relative;'>
  <div style='display:flex;'>
    <div class='block'>1</div>
    <div class='block'>2</div>
  </div>
  
  <div id='btn_box'>
    <a>TestButton</a>
  </div>
  
  <div style='display:flex;'>
    <div class='block'>3</div>
    <div class='block'>4</div>
  </div>
</div>

CSS

.block{
  flex:1;
  padding: 10px;
  border: 2px solid #666999;
  margin: 0 10px 10px 0;
}
#btn_box{
  margin-top: -20px;
  margin-bottom:-15px;
  z-index: 999;
  text-align: center;
}
#btn_box a{
  display: inline-block;
  background: #ff9999;
  padding: 5px 10px;
}
#btn_box + div{
  z-index: 1;
}