Make same height columns with flexbox

In this example below you will see how to do a Make same height columns with flexbox with some HTML / CSS and Javascript

This was a task I got which is to convert a powerpoint slides to HTML. It was easy to use flexbox for this.

Thumbnail
This awesome code was written by ChamaraHarindra, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ChamaraHarindra ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Make same height columns with flexbox</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container body-mainContent adword-landing" style="margin-top: 2px; padding-left: 0; padding-right: 0; background-color: white;">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="massive">SQL Server 2016: <span class="red">Everything built-in</span></h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="grid--5 grid">
                        <div class="col">
                            <div class="tile">
                                <div class="tile__top tile__top--red">
                                    <div class="tile__inner">
                                        <span>Industry leader in mission critical OLTP</span>
                                        <div class="text-right">
                                            <div class="transparent-box">built-in</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tile__body">
                                    <div class="tile__header red-font">Industry leader</div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/industry-leader.jpg" />
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="tile">
                                <div class="tile__top tile__top--purple">
                                    <div class="tile__inner">
                                        <span>Most secure<br/>database</span>
                                        <div class="text-right">
                                            <div class="transparent-box">built-in</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tile__body">
                                    <div class="tile__header purple-font">6 years in a row least vulnerable
                                    </div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/6-years.jpg" />
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="tile">
                                <div class="tile__top tile__top--green">
                                    <div class="tile__inner">
                                        <span>Highest performing data warehouse</span>
                                        <div class="text-right">
                                            <div class="transparent-box">built-in</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tile__body">
                                    <div class="tile__header green-font">#1 performance
                                    </div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/performance.jpg" />
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="tile">
                                <div class="tile__top tile__top--orange">
                                    <div class="tile__inner">
                                        <span>End-to-end mobile BI on any device</span>
                                        <div class="text-right">
                                            <div class="transparent-box">built-in</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tile__body">
                                    <div class="tile__header orange-font">A fraction of the cost</div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/fraction-of-the-cost.jpg" />
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="tile">
                                <div class="tile__top tile__top--blue">
                                    <div class="tile__inner">
                                        <span>End-to-end mobile BI on any device</span>
                                        <div class="text-right">
                                            <div class="transparent-box">built-in</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tile__body">
                                    <div class="tile__header blue-font">R + in-memory</div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/in-memory.jpg" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="grid">
                        <div class="col">
                            <div class="tile">
                                <div class="tile__inner">
                                    <div class="arrow arrow-left"></div>
                                    <div class="arrow arrow-right"></div>
                                    <div class="line-full"></div>
                                    <div class="medium-header masked red-font text-center">In-memory across all workloads</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="grid">
                        <div class="col">
                            <div class="tile" style="padding: 15px 0;">
                                <div class="building hidden-xs hidden-sm"><img src="https://www.redcorp.com/images/adwords-landing-pages/sql/building.jpg" /></div>
                                <div class="tile__inner">
                                    <div class="medium-header masked light-blue-font text-center" style="width: 60%;"><span class="bolder">Consistent experience</span> from on-premises to cloud</div>
                                </div>
                                <div class="cloud hidden-xs hidden-sm"><img src="https://www.redcorp.com/images/adwords-landing-pages/sql/cloud.jpg" /></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="term">
                        The above graphics were published by Gartner, Inc. as part of a larger research document and should be evaluated in the context of the entire document. The Gartner document is available upon request from Microsoft. Gartner does not endorse any vendor,
                        product or service depicted in its research publications, and does not advise technology users to select only those vendors with the highest ratings or other designation. Gartner research publications consist of the opinions of
                        Gartner's research organization and should not be construed as statements of fact. Gartner disclaims all warranties, expressed or implied, with respect to this research, including any warranties of merchantability or fitness for
                        a particular purpose. <br/> National Institute of Standards and Technology Comprehensive Vulnerability Database update 10/2015<br/> TPC-H non-clustered results as of 04/06/15, 5/04/15, 4/15/14 and 11/25/13,
                        respectively. <a href="http://www.tpc.org/tpch/results/tpch_perf_results.asp?resulttype=noncluster" target="_blank">http://www.tpc.org/tpch/results/tpch_perf_results.asp?resulttype=noncluster</a>
                    </div>
                </div>
            </div>
            <br/>

            <div class="row">
                <div class="col-md-12">
                    <div class="grid">
                        <div class="col red-border">
                            <div class="tile">
                                <div class="tile__inner">
                                    <div class="tile__header-plain red-font">Real-time operational analytics</div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/operational-analytics.jpg" />
                                    <ul class="red-font">
                                        <li>Up to <strong>30x</strong> faster transactions with in-memory OLTP </li>
                                        <li>Queries from <strong>minutes to seconds</strong></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col purple-border">
                            <div class="tile">
                                <div class="tile__inner">
                                    <div class="tile__header-plain purple-font">Always Encrypted</div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/encrypted.jpg" />
                                    <ul class="purple-font">
                                        <li>Protect data <strong>at rest and in motion</strong></li>
                                        <li><strong>Without impacting</strong> database performance</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col orange-border">
                            <div class="tile">
                                <div class="tile__inner">
                                    <div class="tile__header-plain orange-font">PolyBase</div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/polybase.jpg" />
                                    <ul class="orange-font">
                                        <li>Manage structured & unstructured data</li>
                                        <li><strong>Simple T-SQL</strong> to query Hadoop (HDFS)</li>
                                        <li><strong>JSON support</strong></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col  orange-border">
                            <div class="tile">
                                <div class="tile__inner">
                                    <div class="tile__header-plain orange-font">End-to-end mobile BI</div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/mobile-ui.jpg" />
                                    <ul class="orange-font">
                                        <li><strong>In-memory</strong> built-in</li>
                                        <li><strong>Strong</strong> with direct query capabilities</li>
                                        <li><strong>Powerful modeling</strong> with 250+ built-in analytical functions</li>
                                        <li><strong>Mobile reports</strong> with online & offline access</li>
                                        <li><strong>Modern data visualizations</strong> with Reporting Services or Power BI</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="grid">
                        <div class="col blue-border">
                            <div class="tile">
                                <div class="tile__inner">
                                    <div class="tile__header-plain blue-font">In-database Advanced Analytics</div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/advanced-analytics.jpg" />
                                    <ul class="blue-font">
                                        <li><strong>R built-in to your T-SQL</strong></li>
                                        <li><strong>Real-time operational analytics</strong> without moving the data</li>
                                        <li><strong>Open source R with in-memory & massive scale</strong> – multi-threading and massive parallel processing</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col green-border">
                            <div class="tile">
                                <div class="tile__inner">
                                    <div class="tile__header-plain green-font">Highest performing data warehouse</div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/data-warehouse.jpg" />
                                    <ul class="green-font">
                                        <li><strong>Scale to MPP</strong> on-premises &in the cloud</li>
                                        <li><strong>Simple T-SQL</strong> to manage structured and unstructured data</li>
                                        <li><strong>½ the cost</strong> of Oracle Exadata</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col light-blue-border">
                            <div class="tile">
                                <div class="tile__inner">
                                    <div class="tile__header-plain light-blue-font">Stretch database</div>
                                    <img class="tile__image" src="https://www.redcorp.com/images/adwords-landing-pages/sql/polybase.jpg" />
                                    <ul class="light-blue-font">
                                        <li><strong>Data is encrypted & queryable</strong></li>
                                        <li><strong>Save money</strong> & improve customer experience</li>
                                        <li><strong>No application changes</strong></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <a class="col light-blue-border box-link" href="https://www.microsoft.com/SQLServer2016" target="_blank">
                            <div class="tile center-v" style="position: relative;">
                                <div class="tile__inner">
                                    <div class="medium-header white-font text-center" style="width: 100%;">
                                        Learn more<br/>
                                        <small style="font-size: 14px;">www.microsoft.com/SQLServer2016</small>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <br/>
            <div class="row">
                <div class="col-md-12">
                    <hr/>
                    <h1 class="massive">SQL Server 2016 editions – what’s new</h1>
                    <p class="large-font">
                        SQL Server 2016 is the biggest leap forward in Microsoft's data platform history with real-time operational analytics, rich visualizations on mobile devices, built-in advanced analytics, new advanced security technology, and new hybrid cloud scenarios.<br/><br/>
                    </p>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="grid">
                                <div class="col red-border">
                                    <div class="tile">
                                        <div class="tile__inner">
                                            <div class="tile__header-plain red-font"><strong>Enterprise</strong></div>
                                            <p>
                                                SQL Server Enterprise delivers comprehensive datacenter capabilities for mission-critical database, business intelligence, and advanced analytics workloads.<sup>1</sup>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col orange-border">
                                    <div class="tile">
                                        <div class="tile__inner">
                                            <div class="tile__header-plain orange-font"><strong>Standard</strong></div>
                                            <p>
                                                SQL Server Standard provides core data management and business intelligence capabilities for non-critical workloads with minimal IT resources.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col light-blue-border">
                                    <div class="tile">
                                        <div class="tile__inner">
                                            <div class="tile__header-plain light-blue-font"><strong>Express</strong></div>
                                            <p>
                                                SQL Server Express is a free edition of SQL Server ideal for development and production for desktop, web and small server applications.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col blue-border">
                                    <div class="tile">
                                        <div class="tile__inner">
                                            <div class="tile__header-plain blue-font"><strong>Developer</strong></div>
                                            <p>
                                                SQL Server Developer is now a free edition providing the full feature set of SQL Server Enterprise. For development and test only, and not for production environments or use with production data.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table-bordered table whats-new">
                                    <tr>
                                        <th style="width:4%;border: none;">&nbsp;</th>
                                        <th class="tile__top--red" style="width:16%">Mission Critical Performance</th>
                                        <th class="tile__top--purple" style="width:16%">Security</th>
                                        <th class="tile__top--green" style="width:16%">Data warehousing</th>
                                        <th class="tile__top--orange" style="width:16%">Business intelligence</th>
                                        <th class="tile__top--blue" style="width:16%">Advanced Analytics</th>
                                        <th class="tile__top--light-blue" style="width:16%">Hybrid cloud</th>
                                    </tr>
                                    <tr>
                                        <td class="table-label table-label--red">
                                            <div class="rotate center-v">Enterprise</div>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>OS max cores and memory</li>
                                                <li>Enhanced in-memory OLTP performance</li>
                                                <li>Operational analytics</li>
                                                <li>Enhanced AlwaysOn with no domain join (WS 2016)</li>
                                                <li>QueryStore</li>
                                                <li>Temporal</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Always Encrypted</li>
                                                <li>Row-level security</li>
                                                <li>Dynamic data masking</li>
                                                <li>Enhanced separation of duties</li>
                                                <li>Enhanced SQL Server auditing</li>
                                                <li>Transparent data encryption</li>
                                                <li>Policy-based management</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Enhanced in-memory ColumnStore</li>
                                                <li>PolyBase in scale-out configuration (head and compute nodes)</li>
                                                <li>Deployment rights for APS</li>
                                                <li>Distributed query processing</li>
                                                <li>Support for JSON</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>End-to-end mobile BI on all major platforms</li>
                                                <li>Enhanced direct query</li>
                                                <li>In-memory analytics</li>
                                                <li>Advanced data mining</li>
                                                <li>Advanced tabular</li>
                                                <li>Web portal experience (all reports in 1 place)</li>
                                                <li>Modernized reports</li>
                                                <li>Pin reports to Power BI</li>
                                                <li>Enhanced multi-dimensional models</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>In database Advanced Analytics</li>
                                                <li>R integration with massive parallel processing for performance and scale</li>
                                                <li>Works with in-memory technology</li>
                                                <li>Run in database or standalone</li>
                                                <li>Connectivity to R Open</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Stretch Database</li>
                                                <li>Enhanced backup to Azure</li>
                                                <li>Enhanced HA and DR with Azure – ease of use, no domain join (WS 2016)</li>
                                                <li>SSIS integration with Azure Data Factory and Azure SQL Data Warehouse</li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="table-label table-label--orange">
                                            <div class="rotate center-v">Standard</div>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Disk-based OLTP</li>
                                                <li>24 cores max and 128 GB max memory</li>
                                                <li>2-node single database failover (non-readable secondary)</li>
                                                <li>Temporal</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Row-level security</li>
                                                <li>Dynamic data masking</li>
                                                <li>Basic auditing</li>
                                                <li>Separation of duties</li>
                                                <li>Policy-based management</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>PolyBase (compute node only)</li>
                                                <li>Support for JSON</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Basic tabular (16GB memory per instance)</li>
                                                <li>Modernized reports</li>
                                                <li>Pin reports to Power BI</li>
                                                <li>Enhanced multi-dimensional models</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Single-threaded for RRE</li>
                                                <li>Connectivity to R Open</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Stretch Database</li>
                                                <li>Backup to Azure</li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="table-label table-label--light-blue">
                                            <div class="rotate center-v">Express</div>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>1 GB memory, max 10 GB memory</li>
                                                <li>Basic OLTP</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Policy-based management</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Support for JSON</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Basic reporting and analytics</li>
                                                <li>Modernized reports</li>
                                            </ul>
                                        </td>
                                        <td>
                                            &nbsp;
                                        </td>
                                        <td>
                                            <ul>
                                                <li>Stretch Database</li>
                                                <li>Backup to Azure</li>
                                            </ul>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="term">
                                This content was developed prior to the product or service’s release and as such, we cannot guarantee that all details included herein will be exactly as what is found in the shipping product. Because Microsoft must respond to changing market conditions,
                                it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of publication. The information represents the product or
                                service at the time this document was shared and should be used for planning purposes only. Information subject to change at any time without prior notice.
                            </div>
                            <hr/>
                            <h1 class="massive">SQL Server 2016 editions – what’s new</h1>
                            <div class="table-responsive">
                                <table class="table table-bordered whats-new table-condensed">
                                    <tr>
                                        <th colspan="2" class="tile__top--red">&nbsp;</th>
                                        <th class="tile__top--light-blue text-center">Express</th>
                                        <th class="tile__top--orange text-center">Standard</th>
                                        <th class="tile__top--red text-center">Enterprise<sup>1</sup></th>
                                    </tr>
                                    <tr>
                                        <td rowspan="9" style="vertical-align: middle; font-size: 20px;">
                                            <strong class="red-font">Mission critical<br/>performance</strong>
                                        </td>
                                        <td class="white">
                                            Maximum number of cores
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center">4 cores</td>
                                        <td class="white text-center">24 cores</td>
                                        <td class="white text-center">Unlimited</td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Maximum memory utilized per instance
                                        </td>
                                        <td class="white text-center">1 GB</td>
                                        <td class="white text-center">128 GB</td>
                                        <td class="white text-center">OS Max</td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Maximum size
                                        </td>
                                        <td class="white text-center">10 GB</td>
                                        <td class="white text-center">524 PB</td>
                                        <td class="white text-center">524 PB</td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Basic OLTP
                                        </td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk light-blue-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk orange-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Manageability (Management Studio, Policy-Based Management)
                                        </td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk light-blue-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk orange-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Basic high availability (2-node single database failover, non-readable secondary)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk orange-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Enterprise data management (Master Data Services, Data Quality Services)
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Advanced OLTP (In-memory OLTP, Operational analytics)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Advanced HA (Always On - multi-node, multi-db failover, readable secondaries)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td rowspan="2" style="vertical-align: middle; font-size: 20px;">
                                            <strong class="purple-font">Security</strong>
                                        </td>
                                        <td class="white">
                                            Basic security (Row-level security, data masking, basic auditing, separation of duties)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk orange-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Advanced security (Transparent Data Encryption, Always Encrypted)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td rowspan="2" style="vertical-align: middle; font-size: 20px;">
                                            <strong class="green-font">Data warehousing</strong>
                                        </td>
                                        <td class="white">
                                            Advanced data integration (Fuzzy grouping and look ups, change data capture)
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Data warehousing (In-Memory ColumnStore, Partitioning)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td rowspan="6" style="vertical-align: middle; font-size: 20px;">
                                            <strong class="orange-font">Business intelligence</strong>
                                        </td>
                                        <td class="white">
                                            Programmability & Developer Tools (T-SQL, CLR, Data Types, FileTable, JSON)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk light-blue-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk orange-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Basic reporting & analytics
                                        </td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk light-blue-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk orange-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Basic data integration (SSIS, built-in connectors)
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk orange-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Basic Corporate Business Intelligence (Multi-dimensional models, Basic tabular model)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk orange-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Mobile BI (Datazen)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Advanced Corporate Business Intelligence (Advanced tabular model, Direct query, in-memory analytics, advanced data mining)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td rowspan="2" style="vertical-align: middle; font-size: 20px;">
                                            <strong class="blue-font">Advanced Analytics</strong>
                                        </td>
                                        <td class="white">
                                            Basic “R” integration (Connectivity to R Open, Limited parallelism for RRE)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk light-blue-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk orange-font"></i></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td class="white">
                                            Advanced “R” integration (Full parallelism for RRE)
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"></td>
                                        <td class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align: middle; font-size: 20px;">
                                            <strong class="light-blue-font">Hybrid cloud</strong>
                                        </td>
                                        <td class="white" style="vertical-align: middle;">
                                            Stretch Database
                                            <span class="pull-right light-blue-font"><strong>New</strong></span>
                                        </td>
                                        <td style="vertical-align: middle;" class="white text-center"><i class="glyphicon glyphicon-asterisk light-blue-font"></i></td>
                                        <td style="vertical-align: middle;" class="white text-center"><i class="glyphicon glyphicon-asterisk orange-font"></i></td>
                                        <td style="vertical-align: middle;" class="white text-center"><i class="glyphicon glyphicon-asterisk red-font"></i></td>
                                    </tr>
                                </table>
                            </div>
                            <div class="term">
                                1 SQL Server 2016 Developer Edition offers the full feature set of SQL Server 2016 Enterprise Edition, but Developer Edition is for development and test only, and not for production environments or use with production data. © 2016 Microsoft Corporation.
                                All rights reserved. This document is provided "as-is." Information and views expressed in this document, including URL and other Internet Web site references, may change without notice. You bear the risk of using it. This
                                document does not provide you with any legal rights to any intellectual property in any Microsoft product. You may copy and use this document for your internal, reference purposes. You may modify this document for your
                                internal, reference purposes.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ChamaraHarindra/make-same-height-columns-with-flexbox-VzLwrV */
.adword-landing {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
        }
        
        h1.massive {
            margin: 20px 0 20px;
            color: #333333;
            font-weight: 300;
            font-size: 24px;
            text-align: center;
        }
        
        @media(min-width:768px) {
            h1.massive {
                font-size: 48px;
            }
        }
        
        h1.massive .red {
            color: #a80000;
        }
        
        .red-font {
            color: #a80000;
        }
        
        .purple-font {
            color: #68217a;
        }
        
        .green-font {
            color: #008272;
        }
        
        .orange-font {
            color: #ff8c00;
        }
        
        .blue-font {
            color: #002050;
        }
        
        .light-blue-font {
            color: #0078d7;
        }
        
        .white-font {
            color: #ffffff;
        }
        
        .large-font {
            font-size: 18px;
        }
        
        .bolder {
            font-weight: 900;
        }
        
        .red-border {
            border: 1px solid #a80000;
        }
        
        .purple-border {
            border: 1px solid #68217a;
        }
        
        .green-border {
            border: 1px solid #008272;
        }
        
        .orange-border {
            border: 1px solid #ff8c00;
        }
        
        .blue-border {
            border: 1px solid #002050;
        }
        
        .light-blue-border {
            border: 1px solid #0078d7;
        }
        
        .grid {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            -ms-flex-line-pack: stretch;
            align-content: stretch;
            overflow: hidden;
        }
        
        .grid .col {
            background: #f2f2f2;
            flex: 1;
            margin-bottom: 5px;
            position: relative;
        }
        
        .tile {
            position: relative;
        }
        
        @media(min-width:768px) {
            .grid {
                -ms-flex-direction: row;
                flex-direction: row;
            }
            .grid .col {
                background: #f2f2f2;
                flex: 1;
                margin-right: 5px;
            }
        }
        
        .tile__inner {
            padding: 15px;
            overflow: hidden;
        }
        
        .tile__top {
            min-height: 127px;
            overflow: hidden;
            font-size: 16px;
            color: #ffffff;
            font-weight: 300;
        }
        
        .tile__top--red {
            background: #a80000;
        }
        
        .tile__top--purple {
            background: #68217a;
        }
        
        .tile__top--green {
            background: #008272;
        }
        
        .tile__top--orange {
            background: #ff8c00;
        }
        
        .tile__top--blue {
            background: #002050;
        }
        
        .tile__top--light-blue {
            background: #0078d7;
        }
        
        .tile__body {
            padding: 15px;
        }
        
        .tile__header {
            font-weight: 900;
            text-align: center;
            margin: 0 0 20px;
        }
        
        .tile__header-plain {
            font-size: 18px;
            font-weight: 400;
        }
        
        .tile__image {
            display: block;
            margin: auto;
            max-width: 100%;
        }
        
        .transparent-box {
            border: 2px solid #ffffff;
            font-size: 14px;
            font-weight: 500;
            padding: 7px 15px;
            margin-top: 15px;
            display: inline-block;
            text-align: center;
            color: #ffffff;
            text-decoration: none;
        }
        
        .medium-header {
            font-weight: 300;
            font-size: 26px;
            margin: 0 auto;
            padding: 10px 15px;
            line-height: 120%;
            position: relative;
            display: block;
            width: 40%;
        }
        
        .masked {
            background: #f2f2f2;
        }
        
        .line-full {
            border: 2px solid #a80000;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 15px;
            right: 15px;
        }
        
        .arrow,
        .building,
        .cloud {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .arrow-left {
            width: 0px;
            height: 0px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #a80000;
            left: 15px;
        }
        
        .arrow-right {
            width: 0px;
            height: 0px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #a80000;
            right: 15px;
        }
        
        .building {
            left: 15px;
        }
        
        .cloud {
            right: 15px;
        }
        
        .term {
            font-size: 12px;
            font-style: italic;
            color: #999999;
            margin-bottom: 30px;
            padding-right: 107px;
            background: url('https://www.redcorp.com/images/adwords-landing-pages/logo/ms-logo.jpg') right center no-repeat;
        }
        
        .term a,
        .term a:hover {
            text-decoration: underline;
            color: #0078d7;
        }
        
        a.box-link.col {
            display: block;
            background: #0078d7;
            text-decoration: none;
            transition: .2s all ease-in-out;
        }
        
        a.box-link.col:hover {
            background: #002050;
            text-decoration: none;
        }
        
        .whats-new {
            border: none;
            margin-bottom: 20px;
        }
        
        .whats-new td {
            background: #f2f2f2;
            font-size: 10px;
        }
        
        .whats-new td.white {
            background: #ffffff;
        }
        
        .whats-new th {
            color: white;
            font-size: 18px;
            font-weight: 400;
        }
        
        .whats-new ul {
            padding: 0 0 0 15px;
            margin: 0;
        }
        
        .whats-new ul li {
            padding: 0 0 7px 0;
            margin: 0;
        }
        
        .table-label {
            color: #ffffff;
            border: none !important;
            border-top-left-radius: 30px;
            padding: 0 !important;
            font-weight: bold;
            font-size: 14px !important;
            position: relative;
        }
        
        td.table-label--red {
            background: #a80000;
        }
        
        td.table-label--orange {
            background: #ff8c00;
        }
        
        td.table-label--light-blue {
            background: #0078d7;
        }
        
        .rotate {
            /* Safari */
            -webkit-transform: rotate(-90deg);
            /* Firefox */
            -moz-transform: rotate(-90deg);
            /* IE */
            -ms-transform: rotate(-90deg);
            /* Opera */
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
            /* Internet Explorer */
            filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
        
        .center-v {
            position: absolute;
            top: 45%;
            left: -17px;
        }
        
        @media(min-width:992px) {
            .center-v {
                left: -10px;
            }
        }

Comments