Two column with Images Options

Note: the information is filled in here. If you copy and paste this code, you will need to fill in the correct information. All of these options can be seen here, Examples.

Option 1

<div class="two-column bottom-border">
    <div class="column">
        <h2 class="centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </h2>
        <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
    </div>
    <div class="column">
        <h3 class="centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et purus nec quam aliquet blandit.</h3>
        <table class="responsive-table2">
            <tbody>
                <tr>
                    <th>Hot-Rolled</th>
                    <th>Cold-Rolled</th>
                </tr>
                <tr>
                    <td>low, medium, high-pressure boiler steel pipe, stainless steel pipe, oil cracking pipe, geological steel pipe, and other</td>
                    <td>low, medium pressure boiler tube, high-pressure boiler tube, alloy steel pipe, stainless steel pipe, and oil cracking tube, alloy thin wall steel tube, thin-walled stainless steel pipe, and special-shaped steel tube</td>
                </tr>
                <tr>
                    <td>Does Not Allow Local Buckling</td>
                    <td>Allows Local Buckling (Bending Bearing Capacity)</td>
                </tr>
                <tr>
                    <td>Distribution Of Residual Stress Is Film Type</td>
                    <td>Distribution Of Residual Stress Is Bending</td>
                </tr>
                <tr>
                    <td>Higher Free Torsional Rigidity (Better Torsion Resistance)</td>
                    <td>Lower Free Torsional Rigidity</td>
                </tr>
                <tr>
                    <td>Less Control Over End Result, Lower Dimensional Accuracy</td>
                    <td>High Dimensional Accuracy</td>
                </tr>
                <tr>
                    <td>Lower Quality Surface Characteristics</td>
                    <td>Smoother, Oily/Greasy Surface Characteristics, Sharp Edges</td>
                </tr>
                <tr>
                    <td>High Temperature Process, Then Cool Down (Less Control Over Shape)</td>
                    <td>Room Temperature Process Furthering Hot-Rolling (More Control Over Shape)</td>
                </tr>
                <tr>
                    <td>Highly Used In Agricultural Industry</td>
                    <td>Used For More Technically Precise Applications (Aesthetics)</td>
                </tr>
                <tr>
                    <td>Cheaper</td>
                    <td>More Expensive (Stronger Properties)</td>
                </tr>
            </tbody>
        </table>
        <br>
        <a href="#" class="readMoreBtn centered">Read More</a>
    </div>
</div>

Option 2

 <div class="column">
     <h2 class="centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 </div>
 <div class="two-column">
     <div class="column right-border">
         <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
         <a href="#" class="centered learnMoreBtn">Learn More</a>
     </div>
     <div class="column">
         <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
         <a href="#" class="centered learnMoreBtn">Learn More</a>
     </div>
 </div>

Option 3

<div class="column top-border">
    <h2 class="centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </h2>
</div>
<div class="two-column">
    <div class="column">
        <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <br>
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        </ul>
        <a href="#" class="shopNowBtn">Shop Now</a>
    </div>
    <div class="column">
        <img class="cenetred" src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
    </div>
</div>

Option 4

<div class="column top-border">
    <h2 class="centered">Compare</h2>
</div>
<div class="two-column bottom-border">
    <div class="column right-border">
        <h3 class="centered">Lorem ipsum dolor sit amet</h3>
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Lorem ipsum dolor </li>
        </ul>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
    <div class="column">
        <h3 class="centered">Lorem ipsum dolor sit amet</h3>
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Lorem ipsum dolor </li>
        </ul>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
</div>

Option 5

<div class="column">
    <h2 class="centered">Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
    <a href="#" class="shopNowBtn">Shop Now</a>
</div>
<div class="two-column bottom-border">
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
</div>