I can't figure out how to stretch the tabs (EXPRESS and LOGISTICS) to the required width and remove the indent between them.

Required:

enter image description here

I now have this: https://codepen.io/molekylko/pen/XGqjvj

Π²Π²Π΅Π΄ΠΈΡ‚Π΅ сюда ΠΊΠΎΠ΄

I would be grateful if someone tells you what needs to be corrected so that it is like in the picture.

    1 answer 1

    Result: https://codepen.io/topicstarter/pen/qvYqoY

     .tabs { position: relative; margin: 20px 120px 0 15%; width: 300px; height: 560px; display: flex; } input[type="radio"] { display: none; } .tab, .tab-title { display: inline-block; } .tab :checked+.tab-title { position: relative; background: #ba0000; top: 1px; z-index: 1; } .tab-content { background-color: #ba0000; box-sizing: border-box; padding: 10px; border: none; } .tab :checked+.tab-title+.tab-content { display: block; } .tab { background-color: #ba0000; } .tab label { width: 200px; } .tab-title { background: #ffcc00; padding: 5px 10px; border: none; } .tab-content { position: absolute; left: 0; box-sizing: border-box; width: 100%; display: none; height: 460px; width: 400px; } 
     <div class="tabs"> <div class="tab"> <input type="radio" id="tab1" name="tab-group" checked> <label for="tab1" class="tab-title">Express</label> <section class="tab-content"> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ1 </section> </div> <div class="tab minus"> <input type="radio" id="tab2" name="tab-group"> <label for="tab2" class="tab-title">Logistics</label> <section class="tab-content"> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ2 </section> </div> </div>