details page

by zuheab

HTML

<div class="main_wrapper">
		

	<div id="tariff-section">
	<ul class="tabs">
		<li>
		<input type="radio" name="company-tab" id="tab-29" checked="">
		<label for="tab-29">SECTION 1</label>
				<div class="tab-content">
								<div class="promo-content">
					<div class="logo"></div>
							<div class="promo-desc">
								<div id="Giga Combi Plus" class="promo-header-section">
									<div class="promo-header">
										<h4>Giga Combi Plus a</h4>
																			</div>
									<div class="services-included-section">					
								<div class="services"><h4>Services</h4>
															<div>
										<p>EU Roaming - inkl.</p>
									</div>
									<div>
										<p>Unli Internet - inkl.</p>
									</div>
									<div>
										<p>Max Speed - 500 MB</p>
									</div>
								</div>
							</div>
							</div>
						</div>
							<div class="tarif-desc">
							<div class="tariff-data">
              <p>One Connection Fee: € 10</p>
              <p>Basic Fee: € 24</p>
              <div>
                <a style="color:blue;" href="details.php?item_id=5&amp;attribute_id=40&amp;tariff_id=46&amp;col=37">Select Tariff</a>
              </div>
              </div>

							</div>
							</div>

<div class="promo-content">
					<div class="logo"></div>
							<div class="promo-desc">
								<div id="Giga Combo Max" class="promo-header-section">
									<div class="promo-header">
										<h4>Giga Combo Max a</h4>
										<p>Awesome</p>									</div>
									<div class="services-included-section">					
								<div class="services"><h4>Services</h4>
															<div>
										<p>EU Roaming - inkl.</p>
									</div>
									<div>
										<p>Unli Internet - inkl.</p>
									</div>
									<div>
										<p>Unli SMS - inkl.</p>
									</div>
									<div>
										<p>Unli Speed - inkl.</p>
									</div>
								</div>
							</div>
							</div>
						</div>
							<div class="tarif-desc">
							<div class="tariff-data"><p>One...

CSS

.main_wrapper{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

		#tariff-section{
		margin-left: 30px;

		/**/
		background: #ddd;
    	height: 100vh;
	}

	.tabs {
		list-style-type: none;
		padding: 0;
		margin: 0;
		position: relative;
	}

	.tabs li {
		float: left;

	}

	.tabs li > input {
		display: none;
	}

	.tabs li > label {
		display: inline-block;
		border: 1px solid #fff;
		height: 30px;		
		vertical-align: middle;
		border-right-width: 0;
		border-bottom-width: 0; 
		padding: 5px 20px;
		cursor: pointer;
		box-shadow: none; 
	}

	.tabs li:last-child > label {
		border-right-width: 1px;
	}

	.tabs .tab-content {
		display: none;
		position: absolute;
		left:0;
		padding: 20px;
		
		min-height: 500px;
		border:1px solid #fff;
		box-shadow: 1px 3px 3px #ddd; 
		width: 95%;
		background: #fff;
		
	}

	.tabs:after{
		content:"";
		clear: both;
		display: block;
		height: 240px;
	}

	/* functional */
	.tabs li > input:checked + label{
		background: white;
		box-shadow: 1px 0px 1px #ddd; 
	}

	.tabs li> input:checked ~ .tab-content{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}

	/* promo - content*/

	.tabs li> input:checked ~ .tab-content > .promo-content{
		display: grid;
		grid-template-columns: 10% 55% 35%;
		height: 200px;
		background: #fff;
		padding: 20px;
		box-shadow: 1px 0px 1px #ddd; 
	
	}

	.tabs li> input:checked ~ .tab-content > .promo-content > .promo-desc > .promo-header-section{
		display: grid;
		grid-template-columns: 50% 50%;
	}

	.tabs li> input:checked ~ .tab-content > .promo-content > .promo-desc > .services-included-section{
		display: grid;
		grid-template-columns: 60% 40%;
	}
	.tabs li> input:checked ~ .tab-content > .promo-content > .promo-desc > .services-included-section .services{
		display: grid;
		grid-template-columns: 70% 20%;
	}


#item-desc {
    margin-left: 30px;
    margin-right: 30px;
    padding: 5px;
    background: #fff;
}

#desc-contents {
    margin: 10px;
    padding: 10px;
}
h4 {
  ...