JSFiddle - React, Tailwind, and code Playground

flexible column hack

by paullferguson

HTML

<div class="two-col-left-large clearfix">                
                
                    <section class="two-col-left-large-flex widget-box email-sign-up second-gradient">
                        <h3>For the latest listings &amp; news</h3>
                        <a href="#" class="button" title="And recive regular emails">Sign up for Alerts</a>
                        <img src="/images/email-sign-up.png" alt="Fwrmers Weekly Newsletter">
                    </section>

                    <section class="two-col-left-large-fix widget-box" id="advert-slot-4">
                        <!-- FarmersWeeklyInteractive/Classified -->

                            <a href="http://ad.doubleclick.net/N6831/jump/FarmersWeeklyInteractive/Classified;sec0=classified;sec2=home;slot=4;tile=2;sz=300x250;ord=123456789?">
                                <img src="http://ad.doubleclick.net/N6831/ad/FarmersWeeklyInteractive/Classified;sec0=classified;sec2=home;slot=4;tile=2;sz=300x250;ord=123456789?" width="300">
                            </a>

                    </section>

                </div>

CSS

.two-col-left-large {padding-left: 300px;}
.two-col-left-large-fix { float:left; position:relative; width:100px; right:100px; margin-left:-100%; clear: none; overflow: hidden;}
.two-col-left-large-flex { float:left; position:relative; width:100%; clear: none; background: gray;}