CSS-Only Accordion

CSS

/*Accordion*/

.toggle input {
	position: absolute;
	opacity: 0;
	z-index: -1;
	outline: none;
}

.toggle input:focus{
	outline: none;
	outline-width: 0;
}

.toggle label {
	position: relative;
	display: block;
	padding: 27px 50px 27px 0;
	font-size: 22px;
	cursor: pointer;
	text-align: left; 
	background-color: #f8f8f8;
}

.toggle { 
	margin-bottom: 10px;
	padding: 0 0 0 30px;
	background-color: #f8f8f8;
}

.toggle .answer {
	max-height: 0;
	overflow: hidden;
	text-align: left;
	color: #5a5659;
	line-height: 19px;
	padding: 0 20px 0 0;
	-webkit-transition: max-height .4s linear;
	-o-transition: max-height .4s linear;
	transition: max-height .4s linear;
	font-size: 16px;
	background-color: #f8f8f8;
}

.toggle .answer .acc_text {
	width: 34%;
	float: left; 
}

.toggle .acc_image {
	width: 66%;
	float: left;
	text-align: right;
}

.toggle .acc_image img {
	padding-bottom: 18px;
}


/* :checked */

.toggle input:checked~.answer {
	max-height: 350px;
}


/* Icon */

.toggle label::after {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 2.0em;
	height: 1.6em;
	line-height: 2.15;
	text-align: center;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s; 
}

.toggle input[type=checkbox]+label::after {
	content: "+";
	font-size: 40px;
	color: #5a5659;
	font-weight: normal; 
}

.toggle input[type=checkbox]:checked+label::after {
	content: "–";
	font-size: 40px; 
}

.toggle label:hover {
	cursor: pointer; 
}

.toggle input {
	position: absolute;
	left: -999em;
}
@media only screen and (max-width:880px) {
	.acc_image img {
		width: 300px!important;
	}
}

@media only screen and (max-width:600px) {
	.toggle .answer>div {
		display: block!important;
		width: 100%!important;
	}
	.toggle .acc_image {
		padding-top: 20px!important;
		width: 100%!important;
		height: auto!important;
		text-align: left!important;
	}
		.acc_image img {
		width: 99%!important;
	}
}

HTML

 <section>
         <div class="toggle">
            <input id="toggle-1" type="checkbox" name="toggles" class="checkbox" checked="">
            <label for="toggle-1">List it</label>
            <div class="answer">
               <div class="acc_text">
                  Tell us what you&rsquo;re selling and take good pictures. Your listing will go out to 177 million people.
               </div>
               <div class="acc_image"><img src="https://source.unsplash.com/vC-GqGbakJo/430x240"></div>
               <br>
               <br>
            </div>
         </div>
         <div class="toggle">
            <input id="toggle-2" type="checkbox" name="toggles" class="checkbox">
            <label for="toggle-2">Ship it</label>
            <div class="answer">
               <div class="acc_text">
                  When your item sells, we&rsquo;ll provide a shipping label at a discount. Drop off your package or schedule a pickup.
               </div>
               <div class="acc_image"><img src="https://source.unsplash.com/BFdSCxmqvYc/430x240"></div>
               <br>
               <br>
            </div>
         </div>
         <div class="toggle">
            <input id="toggle-3" type="checkbox" name="toggles" class="checkbox">
            <label for="toggle-3">Get paid</label>
            <div class="answer">
               <div class="acc_text">
                  Choose your payment method and watch the cash stack&nbsp;up.
               </div>
               <div class="acc_image"><img src="https://source.unsplash.com/zZYchexti_0/430x240"></div>
               <br>
               <br>
            </div>
         </div>
      </section>