border with middle buttons

align buttons in middle with top and bottom broder using extra spans

by ramesh valasa

HTML

<div class="vertical-align-content">
<span class="divider"></span>
<span class="span1 span">Hodor! 1</span>
<span class="span2 span">Hodor!</span>
<span class="divider"></span>
</div>

CSS

.vertical-align-content {
  background-color:#f18c16;
  height:200px;
  display:flex;
      flex-direction: column;
  align-items:center;
  
   justify-content:center;
}

.divider {
  flex: 1;
  border-left: 1px solid red;
  
}