JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper-big" >
    
    <div class="wrapper">
        
        
        <div class="cell left-cell" align="left" >
            <!-- -->
            <div class="step-container">
                <div class="content-box"></div>
                
                
                
                <div class="notch-outer-container">
                    <div class="notch-inner-container">
                        <div class="right-face-notch notch"></div>
                    </div>
                </div>
                
                
                
                <div class="number-outer-container">
                        <div class="number-inner-container">
                            <div class="number-banner"></div>
                        </div>
                    </div>
                
            </div> 
        
			<!-- -->
			
			<div class="step-container" style="margin-top:50px;">
                <div class="content-box"></div>
                
                
                
                <div class="notch-outer-container">
                    <div class="notch-inner-container">
                        <div class="right-face-notch notch"></div>
                    </div>
                </div>
                
                
                
                <div class="number-outer-container">
                        <div class="number-inner-container">
                            <div class="number-banner"></div>
                        </div>
                    </div>
                
            </div> 
		
			<!-- -->
			
			<div class="step-container" style="margin-top:50px;">
                <div class="content-box"></div>
                
                
                
                <div class="notch-outer-container">
                    <div class="notch-inner-container">
                        <div class="right-face-notch notch"></div>
                    </div>
                </div>
                
                
...

CSS

.cell .step-container {
    position: relative;
}
.cell .number-outer-container {
    position: absolute;
    top: 0;
}
.left-cell .number-outer-container {
    left: 390px;
}
.right-cell .number-outer-container {
    left: -20px;
}
.left-face-notch,
.right-face-notch {
    position: absolute;
    top: 85px;
}


.wrapper-big {
	height:600px;
	overflow-y:auto;
	width:100%;
}

.wrapper {
    height:100%;
    width: 826px;
    margin: 50px auto;
    display: table;
    background-color:#003b80;
}

.cell {
    display:table-cell;
    vertical-align: top;
}

.left-cell {
    width:50%;
    background-color: chocolate;    
}

.right-cell {
    background-color:darkslategrey
}

.step-container {
    max-height: 200px;
    font-size: 0;
}

.right-cell .step-container {
    margin-top:125px;
    direction: rtl;
}

.content-box {
    display: inline-block;
    width: 350px;
    height: 200px;
    /*border: 5px solid blue;*/
    font-size: 0;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
    background-color: dodgerblue
}

.right-cell .content-box {
    background-color: darkturquoise
}

.middle-cell {
    height:100%;
    background-color: white;
    width:1.5px;
    font-size: 0;
    box-shadow: 0px 0px 10px black;
    -moz-box-shadow: 0px 0px 10px black;
    -webkit-box-shadow: 0px 0px 10px black;
}

.number-outer-container {
    display:inline-block;
    /*position:absolute;*/
	position:relative;
}

.left-cell .number-outer-container {
    left:390px;
}

.number-inner-container {
    height:200px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.number-banner {
    width:50px;
    height:50px;
    background-color:crimson;
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border-radius: 25px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   ...