console
<div class="info-wrap">
<div class="info-1"></div>
<div class="info-2"></div>
</div>
html,
body {
width: 100%;
height: 100%;
background: white;
}
.info-wrap {
width: 500px;
height: 100px;
padding: 10px;
background: #EFEEEC;
display: flex;
position: relative;
.info-1 {
background: white;
flex: 30;
border-right: 2px dashed #EFEEEC;
}
.info-2 {
background: white;
flex: 10;
}
&::before,
&::after {
position: absolute;
right: calc(25% - 5px);
width: 20px;
height: 20px;
border-radius: 50%;
content: '';
background: #EFEEEC;
}
&::before {
top: 0px;
}
&::after {
bottom: 0px;
}
}