javascript - Image getting out of place when content is expanded -

so, have this site.

when user clicks in "learn more" in 1st , 2nd sections, image on side moves. wish stays originally.

i don't why happens , don't know how fix it. suggestions?

thanks.

ps: please check site example below doesn't have images.

$("#firstp").click(function() {      	  			  $("#one .hidden").addclass("block");  			  $("#one .hidden").removeclass("hidden");  			  $("#firstp").addclass("hidden");  			});    			$("#secondp").click(function() {      	  			  $("#two .hidden").addclass("block");  			  $("#two .hidden").removeclass("hidden");  			 $("#secondp").addclass("hidden");  			});

@import url("https://fonts.googleapis.com/css?family=raleway:200,700|source+sans+pro:300,600,300italic,600italic");        	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {  		margin: 0;  		padding: 0;  		border: 0;  		font-size: 100%;  		font: inherit;  		vertical-align: baseline;  	}    	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  		display: block;  	}    	body {  		line-height: 1;  	}    	ol, ul {  		list-style: none;  	}    	blockquote, q {  		quotes: none;  	}    	blockquote:before, blockquote:after, q:before, q:after {  		content: '';  		content: none;  	}    	table {  		border-collapse: collapse;  		border-spacing: 0;  	}    	body {  		-webkit-text-size-adjust: none;  	}    /* box model */    	*, *:before, *:after {  		-moz-box-sizing: border-box;  		-webkit-box-sizing: border-box;  		box-sizing: border-box;  	}    /* grid */           	body {  		background-color: #2e3141;  		background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");  		background-size: auto, cover;  		background-attachment: fixed, fixed;  		background-position: center, center;  	}         /* type */    	body, input, select, textarea {  		color: #ffffff;  		font-family: "source sans pro", helvetica, sans-serif;  		font-size: 16.5pt;  		font-weight: 300;  		line-height: 1.65;  	}          	strong, b {  		color: #ffffff;  		font-weight: 600;  	}    	em, {  		font-style: italic;  	}    	p {  		margin: 0 0 2em 0;  	}    	h1, h2, h3, h4, h5, h6 {  		color: #ffffff;  		font-family: raleway, helvetica, sans-serif;  		font-weight: 700;  		letter-spacing: 0.1em;  		margin: 0 0 1em 0;  		text-transform: uppercase;  	}    		h1 a, h2 a, h3 a, h4 a, h5 a, h6 {  			color: inherit;  			text-decoration: none;  		}    		h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {  			font-weight: 200;  		}    		h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {  			padding-bottom: 1em;  			border-bottom: solid 2px rgba(255, 255, 255, 0.125);  		}    	h2 {  		font-size: 1.2em;  	}    	h3 {  		font-size: 0.9em;  	}    	h4 {  		font-size: 0.7em;  	}    	h5 {  		font-size: 0.7em;  	}    	h6 {  		font-size: 0.7em;  	}        .hidden{  	display: none !important;  }  .block{  	display: block !important;  }  span.special {  	-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;  		-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;  		-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;  		transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;  		border-bottom: dotted 1px rgba(255, 255, 255, 0.35);  		color: #ffffff;  		text-decoration: none;  			text-decoration: none;  			border-bottom: 0;  			display: block;  			font-family: raleway, helvetica, sans-serif;  			font-size: 0.8em;  			font-weight: 700;  			cursor: pointer;  			letter-spacing: 0.1em;  			margin: 0 0 2em 0;  			text-transform: uppercase;  		}  /* image */    	.image {  		border-radius: 5px;  		border: 0;  		display: inline-block;  		position: relative;  	}    		.image img {  			border-radius: 5px;  			display: block;  		}    		.image.left, .image.right {  			max-width: 40%;  		}    			.image.left img, .image.right img {  				width: 100%;  			}    		.image.left {  			float: left;  			padding: 0 1.5em 1em 0;  			top: 0.25em;  		}    		.image.right {  			float: right;  			padding: 0 0 1em 1.5em;  			top: 0.25em;  		}    		.image.fit {  			display: block;  			margin: 0 0 2em 0;  			width: 100%;  		}    			.image.fit img {  				width: 100%;  			}    		.image.main {  			display: block;  			margin: 0 0 3em 0;  			width: 100%;  		}    			.image.main img {  				width: 100%;  			}    		      /* wrapper */    	#wrapper > header {  		padding: 11em 0 2.25em 0 ;  	}    		#wrapper > header .inner {  			margin: 0 auto;  			width: 55em;  		}    		#wrapper > header h2 {  			border-bottom: solid 2px rgba(255, 255, 255, 0.125);  			font-size: 2em;  			margin-bottom: 0.8em;  			padding-bottom: 0.4em;  		}      	.wrapper {  		background-color: #2e3141;  		margin: 6.5em 0;  		position: relative;  	}    		.wrapper:before, .wrapper:after {  			background-image: url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewbox='0 0 100 100' preserveaspectratio='none'%3e%3cpolygon points='0,100 100,0 100,100' style='fill:%232e3141;' /%3e%3c/svg%3e");  		}    		.wrapper:before, .wrapper:after {  			background-repeat: no-repeat;  			background-size: 100% 100%;  			content: '';  			display: block;  			height: 6.5em;  			position: absolute;  			width: 100%;  		}    		.wrapper:before {  			left: 0;  			top: -6.5em;  		}    		.wrapper:after {  			-moz-transform: scaley(-1);  			-webkit-transform: scaley(-1);  			-ms-transform: scaley(-1);  			transform: scaley(-1);  			bottom: -6.5em;  			left: 0;  		}    		.wrapper.alt:before {  			-moz-transform: scalex(-1);  			-webkit-transform: scalex(-1);  			-ms-transform: scalex(-1);  			transform: scalex(-1);  		}    		.wrapper.alt:after {  			-moz-transform: scaley(-1) scalex(-1);  			-webkit-transform: scaley(-1) scalex(-1);  			-ms-transform: scaley(-1) scalex(-1);  			transform: scaley(-1) scalex(-1);  		}    		.wrapper .inner {  			padding: 3em 0 1em 0 ;  			margin: 0 auto;  			width: 55em;  		}    		.wrapper.style2 {  			background-color: #353849;  		}    			.wrapper.style2:before, .wrapper.style2:after {  				background-image: url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewbox='0 0 100 100' preserveaspectratio='none'%3e%3cpolygon points='0,100 100,0 100,100' style='fill:%23353849;' /%3e%3c/svg%3e");  			}    		.wrapper.style3 {  			background-color: #3d4051;  		}    			.wrapper.style3:before, .wrapper.style3:after {  				background-image: url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewbox='0 0 100 100' preserveaspectratio='none'%3e%3cpolygon points='0,100 100,0 100,100' style='fill:%233d4051;' /%3e%3c/svg%3e");  			}    		.wrapper.style4 {  			background-color: #454858;  		}    			.wrapper.style4:before, .wrapper.style4:after {  				background-image: url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewbox='0 0 100 100' preserveaspectratio='none'%3e%3cpolygon points='0,100 100,0 100,100' style='fill:%23454858;' /%3e%3c/svg%3e");  			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  <section id="wrapper">    						<!-- 1 -->  							<section id="one" class="wrapper spotlight style1">  								<div class="inner">  									<a href="#" class="image"><img src="images/pic03.jpg" alt="" /></a>  									<div class="content">  										<h2 class="major">É fácil ou não éam? ma você, topa ou não topamm. ha.</h2>  										<p>mah ooooee vem pra cá. vem pra cá. mah ooooee vem pra cá. vem pra cá. eu só acreditoammmm.... vendoammmm. ma tem ou não tem o celular milhãouamm? você veio da caravana de ondeammm? você veio da caravana de ondeammm? patríciaaammmm... luiz ricardouaaammmmmm. É com você lombardiam. ma vejam só, vejam só. mah ooooee vem pra cá. vem pra cá. ha hai. bem boladoam, bem boladoam. bem gozadoam. ma vejam só, vejam só. ha haeeee. hi hi. um, dois três, quatro, pim, entendeuam? </p>  										<span id="firstp" class="special">learn more</span>                                          <p class="hidden">silvio santos ipsum ma você, topa ou não topamm. ma quem quer dinheiroam? você veio da caravana de ondeammm? É com você lombardiam. ma o silvio santos ipsum é muitoam interesanteam. com ele ma você vai gerar textuans ha haae. ma vai pra lá. ma não existem mulher feiam, existem mulher que não conhece os produtos jequitiamm. ha hai. bem boladoam, bem boladoam. bem gozadoam. você veio da caravana de ondeammm? estamos em ritmo de festamm. ha hai. bem boladoam, bem boladoam. bem gozadoam. eu só acreditoammmm.... vendoammmm.  </p>  									</div>  								</div>  							</section>    						<!-- 2 -->  							<section id="two" class="wrapper alt spotlight style2">  								<div class="inner">  									<a href="#" class="image"><img src="images/pic02.jpg" alt="" /></a>  									<div class="content">  										<h2 class="major">ma vejam só, vejam só. ma o silvio santos ipsum é muitoam.  </h2>  										<p>ma vale dérreaisam? você veio da caravana de ondeammm? eu não queria perguntar isso publicamente, ma vou perguntar. carla, você tem o ensino fundamentauam? qual é musicamm? ma você está certo dissoam? É com você lombardiam. boca sujuam... sem vergonhuamm. É namoro ou amizadeemm? ma você está certo dissoam? ma quem quer dinheiroam?</p>  										<span id="secondp" class="special">learn more</span>                                          <p class="hidden">mah roda roduamm. ma vai pra lá. eu não queria perguntar isso publicamente, ma vou perguntar. carla, você tem o ensino fundamentauam? ma não existem mulher feiam, existem mulher que não conhece os produtos jequitiamm. ma o silvio santos ipsum é muitoam interesanteam. com ele ma você vai gerar textuans ha haae. o raul gil é gayam! ... maa o ah ae! ih ih! o raul gil é gayamm! É por sua conta e riscoamm? É fácil ou não éam? ma não existem mulher feiam, existem mulher que não conhece os produtos jequitiamm. patríciaaammmm... luiz ricardouaaammmmmm. patríciaaammmm... luiz ricardouaaammmmmm. eu não queria perguntar isso publicamente, ma vou perguntar. carla, você tem o ensino fundamentauam?  </p>  									</div>  								</div>  							</section>    						<!-- 3 -->    </section>

in css line 3399, have rule:

.wrapper.spotlight .inner {     display: -moz-flex;     display: -webkit-flex;     display: -ms-flex;     display: flex;     -moz-align-items: center;     -webkit-align-items: center;     -ms-align-items: center;     align-items: center;     -moz-flex-direction: row;     -webkit-flex-direction: row;     -ms-flex-direction: row;     flex-direction: row; } 

your items align center. if change align-items: center; align-items: flex-start; image remain in right place.