JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<div class="section group">
	<div class="col span_1_of_2">
	<div class="about2"><a href="inizio-los-cabos" target="_self"><h6>LOS CABOS</h6></a><br><br><H7>ADDRESS:</H7><br><a href="http://www.raintreevacationclub.com/vacation-resorts/mexico/los-cabos/club-regina-los-cabos/" target="_self">CLUB REGINA LOS CABOS</a><br>Carretera Transpeninsular Km. 22.5<br> Los Cabos, Baja California Sur<br><br><H7>PHONE:</H7><br>624•163•7200 Ext. 7281, 7285<br><br><H7>EMAIL:</H7><br><a href="mailto:[email protected]?Subject=Reservations and Information" target="_top">[email protected]</a><br><br><H7>HOURS:</H7><br>Breakfast: 7:00 am - 11:30 am<br>Dinner: 6:00 pm - 10:30 pm</div>
	</div>
	<div class="col span_2_of_2">
	<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3672.932323259666!2d-109.73684399999999!3d22.989516000000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86af4af400000001%3A0xfff2fe3878a8826a!2sRAINTREE+VACATION+CLUB!5e0!3m2!1ses-419!2smx!4v1432748253921" width="100%" height="400" frameborder="0"></iframe>
	</div>
</div>

CSS

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }




/*  GRID OF TWO  */
.span_2_of_2 {
	width: 69.5%;
}
.span_1_of_2 {
	width: 29.5%; text-align:center; magin-top:0; padding-top:0; height:400px; v-align:middle; min-width:300px;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 704px) {
   .span_1_of_2 {text-align:center; margin:0 auto; } 
}


@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
   .span_1_of_2 {text-align:center; margin:0 auto; } 
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
  .span_1_of_2 {text-align:center; margin:0 auto; } 
}