css background color same size for all div in a row in responsiveness

Question

I am using 3 div class under a parent div. first div has background with arrow icon but that div has no contents. Second div has contents. Third div has another background.

Now I am trying to make same background height for first and last div by measiring middle div height. But when I am trying to make it responsive. it's not keeping same height background. Because in small screen middle div contents getting bigger and following this side background height not increasing. because those div has no contents.

I used height for two sides div to make it same for desktop view.

 .timetable-first-section{ width: 99%; margin: 0px 1px auto; float: left; } .before-first { background: url(https://s.nimbus.everhelper.me/attachment/1459391/7kdanuewzygiyrn23179/610761-K6hpNbrcwFO5jtHQ/left_border.svg) no-repeat; content: ""; display: inline-block; margin-right: 0px; margin-bottom: 0px; height: 276px; width: 8%; float: left; background-position: 0px -2px 0px 6px; background-position: right 0px top; } .timetable-row-parent { float: left; height: 276px; width: 81%; margin-left: 0px; border-left: 1px dashed #d2b454; border-right: 1px dashed #d2b454; } .after-first { background: url(https://s.nimbus.everhelper.me/attachment/1459414/onaqp4bohrm53axh1epf/610761-LX867urAjQXwUttz/right_border.svg) no-repeat; display: inline-block; margin-right: 0px; margin-bottom: 0px; width: 17px; float: left; height: 276px; background-position: -4px 14px; background-size: 100% 94%; }

 <div class="timetable-first-section"> <div class="before-first"> <div class="time"> <span> 14:30~<br> 17:00 </span> <p>ttttttt</p> </div> <span> </span> </div> <div class="timetable-row-parent"> all contents here </div> <div class="after-first"> <span> </span> </div> </div>

Answer 1

Alright... this is SO confusing.. You have inline blocks, mixed with floats, got contents on your first div which doesn't match the described behaviour, then unnecessarily uses SVGs...

Maybe this is what you're trying to do?

 .contents{ width:90%; margin:0 auto; padding:0; height:300px; background:lightgrey; position:relative; box-shadow: -8px 0 0 -5px white, 8px 0 0 -5px white, -8px 0 0 0 skyblue, 8px 0 0 0 skyblue; } .contents:before, .contents:after{ content:""; position:absolute; top:50%; transform:translateY(-50%); border: 10px solid transparent; box-sizing:border-box; } .contents:before{ left:-28px; border-right:10px solid skyblue; } .contents:after{ right:-28px; border-left:10px solid skyblue; } .contents p{ text-align:center; }

 <div class="contents"> <p>All content goes here</p> </div>