CodePen

HTML

            
              
<div class="grid">
      <div class="grid-1-8">
        <span class="numbers"> 01 </span>
      </div>
			<div class="grid-1-3"> 
				<div class="module">
					<h1>Title 1</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque
							dolor quam veritatis dolorem eum omnis doloribus commodi iste
							placeat eligendi ex nulla architecto perferendis est totam quidem
							laboriosam cumque quisquam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque
							dolor quam veritatis dolorem eum omnis doloribus commodi iste
							placeat eligendi ex nulla architecto perferendis est totam quidem
							laboriosam cumque quisquam. </p>
						</div>
				</div>

			<div class="grid-right">
				<div class="right-module">
					<ul class="buy-btns">
					  	<li><span>link</span></li>
					  	<li><a href="">link</a></li>
					</ul>
					<p>descr 1 <br/> <span>SOME TEXT BELOW </p></span>
					<p>description 2 <br/><span> SOME TEXT BELOW </span></p>
					<p> descriptions number 3 <br/> <span>SOME TEXT BELOW </p></span>
				</div>
			</div>
    </div>
		<div class="grid">
			<div class="grid-1-3"> 
				<div class="module">
						<h1>Title 2</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque
							dolor quam veritatis dolorem eum omnis doloribus commodi iste
							placeat eligendi ex nulla architecto perferendis est totam quidem
							laboriosam cumque quisquam. </p>
				</div>
			</div>
			<div class="grid-2-3">
				<div class="right-module">
					<ul class="buy-btns">
					  <li><span>link</span></li>
					  <li><a href="">link</a></li>
					</ul>
					<p>descr 1 <br/> <span>SOME TEXT BELOW </p></span>
					<p>description 2 <br/><span> SOME TEXT BELOW </span></p>
					<p> descriptions number 3 <br/> <span>SOME TEXT BELOW </p></span>
			</div>
      </div>
      <ol>
		</div>
	            
	
            
          
!

CSS

            
              .pointer {
    cursor: pointer;
    }

span, .numbers {
 .numbers {
    margin-left: 100px;
    marging-top: 100px;
    
  }
}

.expanded {
  
  span, .numbers {
    color: white;  
  }
  
  h1 {
     color: #fff; 
  }
  ol li {
   color: #fff; 
  }
  
	background: #e05f5a;
	@include transition(background .2s linear);
	width: 100%;
	}


.expanded, .expanded ol li {
   color: #fff; 
}

 
.fonts {
	margin-top: 100px;
}

h1 {
	font-size: 3.5em;
	line-height: 100px;
	margin-bottom: 18px;
	margin-top: 0;
	color: #e05f5a;
}

ol li {
	font-size: 20px;
	list-style-type: decimal-leading-zero;
	color: #e05f5a;
	padding-left: 10px;
  margin-left: 0;
	
}

p {
	font-size: 18px;
	width: 90%;
	line-height: 25px;
	margin: 0 0 0 0;
		
}

span {
		font-size: 10px;
}

h2 {
	font-size: 18px;
	line-height: 124px;
	margin-bottom: 18px;
	padding-top: 12px;
}

h3 {
	font-size: 12px;
	line-height: 18px;
}


.right-module {
	margin-top: 30px;
	background: 0;
	margin-left: 20px;
	padding-left: 20px;
}

.left-module {
	margin-top: 40px;
	background: 0;
	margin-left: 60px;
	padding-left: 20px;
	padding-right: 0;
}


footer {
	margin-top: 800px;
}




.buy-btns {
	list-style: none;
	padding: 5px;
	margin-bottom: 30px;
	li {
		display: inline;

	}
}

	span {
		color: #e05f5a;
		font-size: 14px;
	}
  
	a {
		display: inline-block;
		background: white;
		color: #e05f5a;
		padding: 8px;
		font-size: 15px;
		border: 0;

	}
  


  
  
.grid {
	padding: 0px 0 20px 80px;
	margin-bottom: 80px;
	&:after {
		content: "";
		display: table;
		clear: both;
	  }
}

[class*='grid-'] {
	float: left;
	
}

[class*='column'] 

.grid-1 {
	width: 100%;
}

.grid-1-8 {
	width: 12.5%
}

.grid-1-2 {
	width: 50%;
}

.grid-1-4 {
	width: 25%;
}

.grid-3-4 {
	width: 75%;
}

.grid-2-3 {
	width: 66.6%;
}

.grid-1-3 {
	width: 33.3%;
}

.grid-right {
	width:54.2%;
}










            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function(){

  $('.grid p, .grid .right-module').hide();
	$('.grid h1').addClass('pointer').click(function() {
		var $article  = $(this).closest(".grid"),
		$siblings = $article.find("p"),
        $right = $article.find(".right-module")
		if ($article.hasClass('expanded')) {
			  $right.fadeToggle('slow');
        $siblings.slideToggle('slow').promise().done(function() {
				$article.removeClass('expanded');
			});
		} else {
			$right.fadeToggle('slow');
      $article.addClass('expanded');
			$siblings.slideToggle('slow');
		}
	});

});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................