JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <div class="new-venue-item">
<div class="image">
<div class="image">
<a href="/venue/8133_south-lawn-hotel-lymington-hampshire" title="Discover more about South Lawn Hotel"><img src="http://static.weddingvenues.com/venues/200x300/8133_Outside_5a.jpg" class="" width="200" height="300" alt="Hotel Exterior" title="Hotel Exterior" item-prop=""/></a>
</div>
<div id="map8133" class="map" data-lng="-1.5899602" data-lat="50.7350472"></div>
<div class="overlay">
<a href="#" class="action-btn btn-wv contact-venue trackit" data-click-type="search-contact" data-venue-id="8133" data-customer-id="4060" data-id="8133">Contact venue</a>
<a href="/venue/8133_south-lawn-hotel-lymington-hampshire/" class="action-btn btn-white trackit" data-click-type="search-map" data-venue-id="8133" data-customer-id="4060">More info</a>
</div>
</div>
<div class="info">
<a href="/venue/8133_south-lawn-hotel-lymington-hampshire" title="Discover more about South Lawn Hotel">South Lawn Hotel</a>
<span class="address"><span class="address"><a href="/p-1963/united-kingdom/england/hampshire/lymington/" title="Lymington, Hampshire">Lymington</a>, <a href="/p-70/united-kingdom/england/hampshire/" title="Hampshire, England">Hampshire</a></span></span>
</div>
</div> <div class="new-venue-item">
<div class="image">
<div class="image">
<a href="/venue/8130_8-lynwood-hale-" title="Discover more about 8 Lynwood"><img src="http://static.weddingvenues.com/venues/200x300/8130_wedding_reception_venues_hale_cheshire.jpg" class="" width="200" height="300" alt="8 Lynwood" title="8 Lynwood" item-prop=""/></a>
</div>
<div id="map8130" class="map" data-lng="-2.3293485" data-lat="53.3670998"></div>
<div class="overlay">
<a href="#" class="action-btn btn-wv contact-venue trackit" data-click-type="search-contact" data-venue-id="8130" data-customer-id="4059" data-id="8130">Contact venue</a>
<a href="/venue/8130_8-lynwood-hale-/" class="action-btn...

CSS

.new-venues .text-intro {
					background: whiteSmoke;
					border-bottom: 1px solid #ccc;
					margin-top: -30px;
					padding: 40px 0;
				}
				
				.new-venue-item {
				  float: left;
				  padding: 30px 15px;
				  width: 33%;
				}
					.new-venue-item > .image {
						position: relative;
					}
					
						.new-venue-item .image .image,
						.new-venue-item .image .map {
							float: left;
							width: 50%;
							min-height: 200px;
						}
							.new-venue-item .image .image img {
								border-radius: 4px 0 0 0;
								border-right: 1px solid #fff;
								height: auto !important;
								width: 100% !important;
							}
							
						.new-venue-item .map {
							border-radius: 0 4px 0 0;
							bottom: 0;
							left: 50%;
							position: absolute;
							top: 0;
						}
						
					.new-venue-item .image:after {
						clear: both;
						content: '';
						display: table;
					}
					
					.new-venue-item .image .overlay {
						background: rgba(51,24,37,0.62);
						border-radius: 4px 4px 0 0;
						bottom: 0;
						left: 0;
						opacity: 0;
						padding-top: 50px;
						position: absolute;
						right: 0;
						top: 0;
						
						-webkit-transition: opacity .2s ease-out;
						   -moz-transition: opacity .2s ease-out;
								transition: opacity .2s ease-out;
					}
					.new-venue-item .image:hover .overlay {
						opacity: 1;
					}
					
				.new-venue-item .info {
					background: whiteSmoke;
					border-radius: 0 0 4px 4px;
					height: 51px;
					padding: 5px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%
				}
					.new-venue-item .info > a {
						font-size: 15px;
						font-weight: bold;
					}
					.new-venue-item .info .address {
						display: block;
					}
						.new-venue-item .info .address a {
							color: #888;
						}
						.new-venue-item .info .address a:hover {
							color: #000;
						}

JavaScript

$('.new-venue-item').each(function() {
					
					var $map = $(this).find('.map'),
						lat  = parseFloat( $map.data('lat') ),
						lng  = parseFloat( $map.data('lng') );

					// Hook up the map:
					var mapOptions = {
						scrollwheel: false,
						streetViewControl: false,
						mapTypeControl: false,
						panControl: false,
						zoomControl: false,
						draggable: false,
						zoomLevel: 14,
						center: { lat: lat, lng: lng }
					};
					
					//new google.maps.Map( document.getElementById('map8160'), mapOptions );
					
					$(this).data('map', new google.maps.Map( $map[0], mapOptions ) );
						
					
				});