<div class="tabContent">
<div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, placeat, voluptas, hic aspernatur rem commodi sed temporibus nesciunt maxime iste consequatur. Ex, voluptatum unde exercitationem suscipit ea totam iusto qui nobis in maiores nam, adipisci nihil repudiandae nesciunt voluptatibus voluptate magnam officiis. Enim similique sed facilis fuga optio culpa! Facilis cumque doloribus similique odio qui ullam quas quibusdam eveniet saepe accusamus suscipit error officia itaque temporibus, enim nemo labore. Ullam ab at sit ratione minus nisi ipsam maiores repellat perspiciatis odit magni tempore deserunt, est amet cum. Eum dolore aperiam vitae sint laborum nostrum impedit quas mollitia minima? Cupiditate eius nobis asperiores fugiat iste omnis. Eligendi iusto reiciendis fugiat excepturi, minima sed ex ullam! Fuga ab id, non nam ratione debitis praesentium quam, molestiae amet qui voluptas odio atque blanditiis quibusdam corporis aliquam. Quod, impedit et blanditiis recusandae ratione minima temporibus saepe alias labore nemo veniam enim obcaecati vel perferendis sed tempore quidem doloribus esse totam dignissimos, dolorum commodi error quas nobis. Fugit magnam dicta maiores temporibus iste atque dolorum inventore officia, quam magni nulla incidunt nostrum hic recusandae eos voluptatem eveniet et repudiandae, facilis quis. Ducimus, dicta delectus. Ex architecto dolore cum, maxime praesentium nam, distinctio impedit delectus provident perferendis suscipit temporibus minima illum vitae ea dignissimos, obcaecati laborum quos sapiente? Accusantium eveniet consectetur quasi enim, libero incidunt dolores fugiat molestiae ex distinctio et vel sapiente nihil ipsum officiis quisquam minima adipisci totam impedit vero dicta quis. Laboriosam id ipsa harum architecto! Odio quibusdam incidunt voluptatum molestias culpa error cupiditate eos, vero, at perferendis minus nulla iste ipsa labore animi magni repellendus quia facere repellat illo, aliquid tempore alias numquam veniam? Ducimus porro consectetur vel, libero ab repellat facere, magni sed perspiciatis impedit saepe deleniti tempore architecto. Optio, ratione? Earum quam numquam quibusdam vitae eligendi, distinctio saepe pariatur modi suscipit accusantium ex eum ea id, maxime dolores laborum natus voluptatem adipisci iste minus odit dolorum doloremque corrupti? Ad id consectetur voluptatem voluptatibus. Ratione, quibusdam distinctio. Accusantium velit consequatur incidunt ut dolor quasi soluta sint culpa nesciunt quas, nisi necessitatibus, laborum officiis corrupti illo repudiandae itaque, rem porro eum? Recusandae officia ipsum dignissimos dolore ab non rem ullam doloremque ad eum amet assumenda distinctio, nihil eveniet dolor ea eligendi, sit harum necessitatibus cumque ratione! Suscipit similique maiores consectetur, dolorum inventore magni expedita quos perspiciatis minus vitae accusamus officiis iste eius eaque, quod, dolores velit repellat veniam sed ipsum repellendus qui mollitia. Veritatis molestiae aliquid fuga porro ratione libero hic maxime optio. Libero minima, quia, ut pariatur vel ea explicabo tempore commodi sed aliquid architecto quis, delectus quod neque blanditiis ducimus. Laboriosam laudantium quam repellendus doloribus vitae labore eligendi illum numquam, saepe voluptates sit commodi fugiat molestiae dolore! Natus doloremque cum accusantium dignissimos tempora assumenda odio, aut et eveniet itaque, esse nam nisi ex quaerat quisquam corporis iste hic ducimus suscipit nulla deleniti consectetur! Quod, voluptatibus veniam! Nostrum, incidunt. Neque veritatis aliquam suscipit odio temporibus dicta! Accusantium, ea vitae deserunt esse corporis, autem doloremque itaque facilis dolorem debitis minus aspernatur voluptatem incidunt hic magnam pariatur excepturi asperiores velit illum nesciunt harum quae atque. Tenetur quod distinctio non at sit, perferendis accusantium velit consequuntur dolore autem facilis enim perspiciatis ut officiis unde error quam, dignissimos ullam eius quas tempore? Ducimus laborum consequuntur molestiae magni veritatis unde mollitia impedit quisquam deleniti officia natus ullam et excepturi, animi blanditiis. Architecto est quasi ex aut aliquid molestias quos placeat. Corporis sit nam labore excepturi nemo, sunt est distinctio fuga. Quod, rem quaerat impedit ad cum quo obcaecati non tempora libero possimus soluta fugiat ipsa beatae? Sed explicabo blanditiis architecto impedit quibusdam, possimus harum eveniet consequuntur.</div>
<div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique culpa delectus labore corrupti laborum distinctio illo nesciunt unde nam assumenda earum reprehenderit, itaque vel maxime modi odit nemo accusamus voluptate enim iste harum? Iste qui optio porro ex corrupti laborum, enim consequuntur dicta amet ut ipsam veniam molestias esse atque quisquam magni, impedit consequatur non temporibus fugiat minima? Ea voluptas aspernatur quo, fugiat unde voluptatum possimus ipsam tempore maxime architecto sunt delectus laborum accusantium necessitatibus molestiae autem libero, provident magni modi consectetur quas nam. Cum, adipisci assumenda. Voluptatum alias sint facilis. Blanditiis quidem neque odit dicta. Dignissimos similique cumque consectetur nobis, pariatur eum distinctio asperiores nesciunt dicta blanditiis sed, dolore in explicabo omnis ullam aliquid voluptas quis fuga sunt, modi ad id fugiat culpa! Perspiciatis consequatur quibusdam hic saepe recusandae quos libero! Voluptatum ab tenetur, atque adipisci vero, reiciendis minus odio, exercitationem maxime id excepturi explicabo accusantium fugit iste? Optio, neque. Neque porro ipsam aliquam, et nesciunt eum vel a facilis temporibus eius dolorem omnis optio ut, cum exercitationem aut mollitia corporis sed explicabo tempore recusandae? Exercitationem, animi. Porro dignissimos architecto excepturi repudiandae quibusdam doloremque! Iste, mollitia modi similique rerum vero aliquam odit veritatis nemo porro? Numquam ipsum consequuntur ullam magni sapiente ipsam molestiae, nisi culpa. Voluptates, cumque? Odit vel laboriosam nam? Nemo nihil dolor aperiam aut rerum cumque! Asperiores, sint doloribus doloremque reiciendis praesentium quibusdam accusantium dolore omnis minima harum laboriosam provident exercitationem quo ratione explicabo unde veritatis repudiandae quia mollitia sed. Dolor iste porro eligendi sed rerum repellat fugit numquam eveniet in aut, est aliquid hic aperiam ducimus repellendus repudiandae alias commodi odio nulla. Excepturi beatae amet deserunt non ut quod natus, porro perferendis rerum corrupti itaque nobis aliquam totam harum temporibus odio! Obcaecati, repellat ad sed dignissimos aperiam rerum mollitia quis atque, unde nisi sunt nobis dolores nemo accusamus est? Minima culpa laborum, necessitatibus praesentium ab dolores neque non iusto veritatis possimus optio, exercitationem similique aperiam tempore excepturi fugiat quae, officiis iste. Dolorem neque nulla aspernatur, cum deserunt, reprehenderit odio est quia hic ipsum deleniti nemo sapiente nisi quidem accusamus tenetur necessitatibus earum asperiores sed? Labore facere quaerat consequatur maiores, vero consectetur ullam quod, perferendis consequuntur veritatis, aliquid dicta maxime repudiandae minima accusantium! Labore quisquam placeat quis sed aspernatur! Reiciendis nobis dignissimos repudiandae obcaecati repellat nihil assumenda quis quae, laboriosam, libero quibusdam ducimus expedita necessitatibus! Eius laborum iste ut, veniam et esse saepe repellat minima quod possimus dignissimos placeat, dolores, consectetur labore officiis repellendus dolorem! Commodi itaque sequi ducimus provident ut rerum vel a, soluta optio iure rem architecto aut suscipit nobis inventore corrupti quisquam possimus distinctio assumenda modi doloremque, ad sunt facilis. Assumenda, perspiciatis! Ad culpa vel excepturi explicabo id voluptates dolorum cum odio! Ab pariatur odio porro itaque est, obcaecati consequatur alias iusto unde repellendus provident nam nobis omnis, nemo et. Provident ipsa recusandae, voluptatem ab sit in possimus molestiae mollitia ad tempore, temporibus expedita consequatur nostrum cupiditate quisquam quas reprehenderit deserunt voluptas quia. Ratione animi facere harum numquam quasi. Rerum labore commodi aperiam vero quo? Natus amet laborum animi sapiente quo voluptas dolore, obcaecati esse maiores repudiandae autem aliquid at repellendus commodi est consequatur velit aperiam beatae debitis illum. Minus, nisi, nesciunt suscipit libero, debitis sapiente dolores labore modi animi maiores facilis quis minima. Necessitatibus consequatur explicabo omnis voluptate quam totam, non ipsa cupiditate quo eius. Rem delectus cum vero, doloribus voluptatibus fugit itaque at assumenda repudiandae debitis esse optio, soluta dolor odit aliquid vitae iste necessitatibus voluptas doloremque harum corrupti commodi saepe accusamus obcaecati? A mollitia quas ducimus alias consectetur error autem! Sunt ex fuga repudiandae minus non accusamus animi? Nam soluta inventore, aperiam excepturi nemo molestias. Dolores ipsum commodi illum earum, iusto sint sunt doloremque culpa aliquam quis quibusdam possimus corrupti nam. Blanditiis, placeat! Quo modi fugiat sed dolores tempore in. Porro quisquam optio vitae sed quos vero, nesciunt voluptatem ea reprehenderit. Incidunt nulla ducimus consequuntur quis laudantium odio fugiat, iusto cumque dicta dolore laborum quos eligendi reprehenderit debitis esse quod. Ullam ipsam at necessitatibus aliquid ratione amet odit incidunt adipisci itaque fugit, excepturi non animi quis veniam ducimus, beatae rerum qui est. Tenetur nesciunt reprehenderit odio commodi labore amet quo impedit officia quasi. Tempora eveniet temporibus rem, a aliquam earum consequatur sint incidunt blanditiis, accusamus est dicta dolor, quisquam itaque eaque assumenda? Ipsum et quos, reprehenderit itaque provident modi possimus voluptate doloribus cupiditate dignissimos laudantium in maiores ad minima veniam sapiente hic earum! Veritatis soluta, reprehenderit ex, nostrum voluptatum nulla accusantium eius enim provident a molestias doloremque illum? Rem, quae harum laborum error iste enim mollitia aperiam incidunt soluta, et recusandae tempore officiis doloremque. Quae fugit sed neque quasi culpa ad harum aliquid nemo perspiciatis illo nulla, natus beatae eaque fugiat quas voluptas aspernatur? Numquam corrupti iste ipsum accusamus illo voluptatibus nihil non alias, esse dignissimos vero dolore porro recusandae? Commodi reiciendis at voluptatibus modi sed dolorum ea eveniet excepturi. Totam cupiditate est asperiores cumque ducimus impedit obcaecati illo. Itaque voluptatem deserunt aliquam fugiat inventore aspernatur suscipit animi quae ipsum saepe, alias sit pariatur nobis asperiores. Est atque incidunt suscipit qui accusantium cupiditate quas at. Earum quae accusamus dolor doloremque nesciunt quo repudiandae modi enim laboriosam mollitia pariatur omnis, minus sequi dignissimos, officiis quasi? Similique fugiat voluptatem at, sed soluta dicta reiciendis culpa ipsa autem provident exercitationem repellat voluptas quia voluptatum? Aliquam eligendi similique eveniet voluptatibus numquam laborum consequatur nostrum illo omnis dignissimos itaque, possimus est sapiente nihil autem ducimus rerum sit perferendis? Error architecto est mollitia veritatis? Odit aspernatur illo libero neque facilis ex cum? Voluptate impedit praesentium voluptatum perferendis. Debitis excepturi dolores voluptatum quisquam cum in unde eos hic consequuntur dolorum nihil, incidunt dicta aperiam quaerat adipisci dolorem ea asperiores neque deleniti laboriosam repellat assumenda et! Voluptates hic porro asperiores exercitationem error esse! Hic, dignissimos incidunt quod perspiciatis fuga harum repellat similique tempore blanditiis dolorum quibusdam numquam, voluptatem voluptas assumenda veritatis, ad explicabo quo. Ducimus, laboriosam quibusdam aliquid ad, sequi deleniti repudiandae tempora dolor accusamus possimus magnam quaerat molestias dolorum! Nesciunt dolores distinctio natus a libero totam nihil id tempora rerum soluta, architecto eaque asperiores laudantium quisquam exercitationem ad illum esse perspiciatis, velit veniam recusandae! Harum dolorum maxime libero vel doloremque error earum commodi explicabo assumenda quasi iure perspiciatis ea alias, id omnis suscipit, repellendus asperiores dolore, quas aliquam! Ut error sint ipsa, id neque voluptate magni excepturi voluptas eaque rem illo architecto laborum magnam odio illum unde culpa necessitatibus labore nostrum consectetur dolores. Animi a corporis aliquid rerum? Inventore iure dolore qui non temporibus adipisci alias similique unde, voluptates tempore maiores saepe nam quam! Et, deleniti eum officiis adipisci laboriosam reiciendis ea voluptatibus cum minus mollitia natus saepe quaerat veritatis sed, doloremque voluptates dolore, sunt veniam totam. Corrupti temporibus voluptates incidunt, quae doloribus est nisi ut alias nostrum eligendi, doloremque odio earum? Autem, totam consequatur voluptatibus corrupti molestiae earum pariatur ipsam quo eaque eum odio iusto culpa, vel temporibus amet quia facere dolorum eveniet! Saepe atque earum aperiam modi deserunt laboriosam, neque ad repellat provident iusto est at ab ducimus harum qui! Dolores, exercitationem fugit! Autem cum atque earum recusandae, blanditiis soluta ducimus ex sit nam! Explicabo at iste cumque optio veniam ad architecto, neque, reiciendis saepe eum atque exercitationem quia eligendi! Quasi laboriosam reprehenderit adipisci placeat omnis illo amet nostrum. Facere fugiat, harum at commodi veniam iure ipsa. Neque pariatur labore, eius maxime provident recusandae magni praesentium consectetur saepe dolorem voluptatem ducimus odit eum, aut laudantium itaque velit. Necessitatibus culpa temporibus hic maiores neque, et odio odit, nemo est minus deserunt reprehenderit, nihil enim incidunt atque obcaecati eum distinctio similique deleniti optio. Incidunt, eos nihil quisquam dolor blanditiis tenetur, dignissimos perferendis reiciendis deleniti repellat ducimus quis tempore eum, molestiae repudiandae amet. Vel quidem nemo ducimus fugiat maiores rem, dignissimos excepturi dolorum modi quae iste? Aut modi autem et molestias inventore expedita eum voluptatem fuga aliquid vitae, non obcaecati sapiente, ad nostrum earum, fugiat odit. Repellendus doloribus beatae hic earum ipsam dicta voluptatibus veritatis. Architecto distinctio natus quibusdam vitae molestiae voluptas assumenda, tempora suscipit voluptate fugiat quod laboriosam voluptatem animi adipisci consectetur ratione rerum? Eligendi enim perspiciatis, ipsa iusto voluptatibus dignissimos eveniet voluptate id, hic aliquid ut sunt corrupti fuga quos distinctio, rerum asperiores tenetur et minima dolorum quasi sint ea. Error praesentium fuga quas similique possimus accusamus ut perspiciatis molestiae delectus ad voluptatum, ullam libero quo nulla eligendi. Provident iure sunt repellat porro natus. Expedita nihil facilis amet autem debitis optio nulla, odio sit illo repellat suscipit temporibus eaque labore voluptate esse iste quaerat veritatis facere officiis dolorem enim possimus iusto eum. Delectus ea dolorum hic id consequuntur repellat, fugit earum quam iusto repellendus ipsum provident odio accusantium vero esse rem quos deleniti sit ut et natus. Nemo nisi reprehenderit repudiandae illum consequatur hic. Nihil officiis dignissimos ipsum quam voluptatem pariatur facere, ipsa natus consectetur deleniti officia. Reprehenderit ea ab illo nobis, cupiditate aspernatur, nisi commodi tenetur ratione accusamus beatae dolorem non, corporis repellat rerum officiis inventore qui aliquid consectetur. Illo dolorum autem quam soluta, fugiat at quibusdam quia natus nobis consequuntur eum cupiditate commodi iusto. Praesentium commodi, dicta nam eveniet vitae excepturi! Sit consequuntur deserunt repellendus nulla, sint ea dolores reiciendis quia obcaecati eaque repellat odit perferendis velit quasi aut quae labore quod. Eius libero repellendus quaerat maxime doloremque necessitatibus natus inventore blanditiis laboriosam. Omnis ab voluptatem rerum dolore odit, tempore aspernatur maiores facere illo ducimus? Asperiores porro explicabo similique laborum minus, ex reprehenderit maxime eius eaque aperiam placeat at atque et consectetur vero officia voluptatum consequuntur, aliquid voluptatibus nulla enim natus quae! Nesciunt doloribus ipsam, nihil laudantium necessitatibus tempore facere blanditiis! In iste iure amet consectetur fugiat nulla illo ipsam quisquam atque sapiente.</div>
</div>.tabContent::after, .tabContent:after {
content: '';
display: block;
clear: both;
}
.col {
float: left;
min-height: 125px;
margin-right: 20px;
width: calc(100% * 1/2 - 10px);
}
.col:last-child {
margin-right: 0;
}$(document).ready(function() {
$(window).resize( function() {
$('.col').css('height', 'unset')
var heightOfTabContent = Math.max.apply(Math, $('.col').map(function(){
return $(this).height();
}).get());
$('.col').css('height', heightOfTabContent);
});
});
External CSS
This Pen doesn't use any external CSS resources.