CodePen

HTML

            
              <ol>
	<li class="grid">
		<h1>Title 1</h1>
		<div class="grid-1-3">
			<div class="module">
				<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-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>
	</li>
	<li class="grid">
		<h1>Title 2</h1>
		<div class="grid-1-3">
			<div class="module">
				<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>
	</li>
</ol>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .pointer {
    cursor: pointer;
    }

.expanded {
	background: #e05f5a;
	@include transition(background .2s linear);
	width: 100%;
	}

.expanded h1 {
  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;
	padding-left: 10px;
	
}

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: #fff;
		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.66%;
}

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

.grid-right {
	width:62.5%;
}

            
          
!
? ?
? ?
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-module")
    if ($article.hasClass('expanded')) {
      $siblings.slideUp('slow').promise().done(function() {
        $article.removeClass('expanded');
      });
    } else {
      $article.addClass('expanded');
      $siblings.slideDown('slow');
      $article.siblings().find('p,.right-module')
        .slideUp('slow').promise().done(function() {
        $article.siblings().removeClass('expanded');
      });
    }
  });

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