I need to insert a 1px wide vertical divider line between the two columns of copy in my responsive email below. I also need the line to either turn sideways or disappear when wiewed on a smaller screen. Does anyone know how to do this? I marked it with " <!-- ADD DIVIDER LINE HERE? // --> " in the code below.

Thanks guys!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>*|MC:SUBJECT|*</title>
        <style type="text/css">
            /* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
            #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
            .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
            body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
            table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
            img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

            /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
            body{margin:0; padding:0;}
            img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
            table{border-collapse:collapse !important;}
            body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}

            /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */

            /* ========== Page Styles ========== */

            #bodyCell{padding:20px;}
            #templateContainer{width:600px;}

            /**
            * @tab Page
            * @section background style
            * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
            * @theme page
            */
            body, #bodyTable{
                /*@editable*/ background-color:#DEE0E2;
            }

            /**
            * @tab Page
            * @section background style
            * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
            * @theme page
            */
            #bodyCell{
                /*@editable*/ border-top:4px solid #BBBBBB;
            }

            /**
            * @tab Page
            * @section email border
            * @tip Set the border for your email.
            */
            #templateContainer{
                /*@editable*/ border:1px solid #BBBBBB;
            }

            /**
            * @tab Page
            * @section heading 1
            * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
            * @style heading 1
            */
            h1{
                /*@editable*/ color:#202020 !important;
                display:block;
                /*@editable*/ font-family:Tahoma;font-style: ="sans-serif"
                /*@editable*/ font-size:26px;
                /*@editable*/ font-style:normal;
                /*@editable*/ font-weight:bold;
                /*@editable*/ line-height:100%;
                /*@editable*/ letter-spacing:normal;
                margin-top:0;
                margin-right:0;
                margin-bottom:10px;
                margin-left:0;
                /*@editable*/ text-align:center;
            }

            /**
            * @tab Page
            * @section heading 2
            * @tip Set the styling for all second-level headings in your emails.
            * @style heading 2
            */
            h2{
                /*@editable*/ color:#404040 !important;
                display:block;
                /*@editable*/ font-family:Tahoma;font-style: ="sans-serif"
                /*@editable*/ font-size:20px;
                /*@editable*/ font-style:normal;
                /*@editable*/ font-weight:bold;
                /*@editable*/ line-height:100%;
                /*@editable*/ letter-spacing:normal;
                margin-top:0;
                margin-right:0;
                margin-bottom:10px;
                margin-left:0;
                /*@editable*/ text-align:center;
            }

            /**
            * @tab Page
            * @section heading 3
            * @tip Set the styling for all third-level headings in your emails.
            * @style heading 3
            */
            h3{
                /*@editable*/ color:#606060 !important;
                display:block;
                /*@editable*/ font-family:Tahoma;font-style: ="sans-serif"
                /*@editable*/ font-size:16px;
                /*@editable*/ font-style:normal;
                /*@editable*/ font-weight:normal;
                /*@editable*/ line-height:100%;
                /*@editable*/ letter-spacing:normal;
                margin-top:0;
                margin-right:0;
                margin-bottom:10px;
                margin-left:0;
                /*@editable*/ text-align:center;
            }

            /**
            * @tab Page
            * @section heading 4
            * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
            * @style heading 4
            */
            h4{
                /*@editable*/ color:#808080 !important;
                display:block;
                /*@editable*/ font-family:Tahoma;font-style: ="sans-serif"
                /*@editable*/ font-size:14px;
                /*@editable*/ font-style:italic;
                /*@editable*/ font-weight:normal;
                /*@editable*/ line-height:100%;
                /*@editable*/ letter-spacing:normal;
                margin-top:0;
                margin-right:0;
                margin-bottom:10px;
                margin-left:0;
                /*@editable*/ text-align:center;
            }

            /* ========== Header Styles ========== */

            /**
            * @tab Header
            * @section preheader style
            * @tip Set the background color and bottom border for your email's preheader area.
            * @theme header
            */
            #templatePreheader{
                /*@editable*/ background-color:#F4F4F4;
                /*@editable*/ border-bottom:1px solid #CCCCCC;
            }

            /**
            * @tab Header
            * @section preheader text
            * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
            */
            .preheaderContent{
                /*@editable*/ color:#808080;
                /*@editable*/ font-family:Tahoma;
                /*@editable*/ font-size:10px;
                /*@editable*/ line-height:125%;
                /*@editable*/ text-align:left;
            }

            /**
            * @tab Header
            * @section preheader link
            * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
            */
            .preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */ .preheaderContent a .yshortcuts /* Yahoo! Mail Override */{
                /*@editable*/ color:#606060;
                /*@editable*/ font-weight:normal;
                /*@editable*/ text-decoration:underline;
            }

            /**
            * @tab Header
            * @section header style
            * @tip Set the background color and borders for your email's header area.
            * @theme header
            */
            #templateHeader{
                /*@editable*/ background-color:#F4F4F4;
                /*@editable*/ border-top:1px solid #FFFFFF;
                /*@editable*/ border-bottom:1px solid #CCCCCC;
            }

            /**
            * @tab Header
            * @section header text
            * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
            */
            .headerContent{
                /*@editable*/ color:#505050;
                /*@editable*/ font-family:Tahoma;font-style: ="sans-serif"
                /*@editable*/ font-size:20px;
                /*@editable*/ font-weight:bold;
                /*@editable*/ line-height:100%;
                /*@editable*/ padding-top:0;
                /*@editable*/ padding-right:0;
                /*@editable*/ padding-bottom:0;
                /*@editable*/ padding-left:0;
                /*@editable*/ text-align:left;
                /*@editable*/ vertical-align:middle;
            }

            /**
            * @tab Header
            * @section header link
            * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
            */
            .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
                /*@editable*/ color:#EB4102;
                /*@editable*/ font-weight:normal;
                /*@editable*/ text-decoration:underline;
            }

            #headerImage{
                height:auto;
                max-width:600px;
            }

            /* ========== Column Styles ========== */

            .templateColumnContainer{width:260px;}

            /**
            * @tab Columns
            * @section column style
            * @tip Set the background color and borders for your email's column area.
            */
            #templateColumns{
                /*@editable*/ background-color:#F4F4F4;
                /*@editable*/ border-top:1px solid #FFFFFF;
                /*@editable*/ border-bottom:1px solid #CCCCCC;
            }

            /**
            * @tab Columns
            * @section left column text
            * @tip Set the styling for your email's left column content text. Choose a size and color that is easy to read.
            */
            .leftColumnContent{
                /*@editable*/ color:#505050;
                /*@editable*/ font-family:Tahoma;font-style: ="sans-serif"
                /*@editable*/ font-size:14px;
                /*@editable*/ line-height:150%;
                padding-top:0;
                padding-right:20px;
                padding-bottom:20px;
                padding-left:20px;
                /*@editable*/ text-align:center;
            }

            /**
            * @tab Columns
            * @section left column link
            * @tip Set the styling for your email's left column content links. Choose a color that helps them stand out from your text.
            */
            .leftColumnContent a:link, .leftColumnContent a:visited, /* Yahoo! Mail Override */ .leftColumnContent a .yshortcuts /* Yahoo! Mail Override */{
                /*@editable*/ color:#EB4102;
                /*@editable*/ font-weight:normal;
                /*@editable*/ text-decoration:underline;
            }

            /**
            * @tab Columns
            * @section right column text
            * @tip Set the styling for your email's right column content text. Choose a size and color that is easy to read.
            */
            .rightColumnContent{
                /*@editable*/ color:#505050;
                /*@editable*/ font-family:Tahoma;font-style: ="sans-serif"
                /*@editable*/ font-size:14px;
                /*@editable*/ line-height:150%;
                padding-top:0;
                padding-right:20px;
                padding-bottom:20px;
                padding-left:20px;
                /*@editable*/ text-align:center;
            }

            /**
            * @tab Columns
            * @section right column link
            * @tip Set the styling for your email's right column content links. Choose a color that helps them stand out from your text.
            */
            .rightColumnContent a:link, .rightColumnContent a:visited, /* Yahoo! Mail Override */ .rightColumnContent a .yshortcuts /* Yahoo! Mail Override */{
                /*@editable*/ color:#EB4102;
                /*@editable*/ font-weight:normal;
                /*@editable*/ text-decoration:underline;
            }

            .leftColumnContent img, .rightColumnContent img{
                display:inline;
                height:auto;
                max-width:260px;
            }

            /* ========== Footer Styles ========== */

            /**
            * @tab Footer
            * @section footer style
            * @tip Set the background color and borders for your email's footer area.
            * @theme footer
            */
            #templateFooter{
                /*@editable*/ background-color:#F4F4F4;
                /*@editable*/ border-top:1px solid #FFFFFF;
            }

            /**
            * @tab Footer
            * @section footer text
            * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
            * @theme footer
            */
            .footerContent{
                /*@editable*/ color:#808080;
                /*@editable*/ font-family:Tahoma;font-style: ="sans-serif"
                /*@editable*/ font-size:10px;
                /*@editable*/ line-height:150%;
                padding-top:20px;
                padding-right:20px;
                padding-bottom:20px;
                padding-left:20px;
                /*@editable*/ text-align:left;
            }

            /**
            * @tab Footer
            * @section footer link
            * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
            */
            .footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
                /*@editable*/ color:#606060;
                /*@editable*/ font-weight:normal;
                /*@editable*/ text-decoration:underline;
            }

            /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */

            @media only screen and (max-width: 480px){
                /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
                body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
                body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */

                /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
                #bodyCell{padding:10px !important;}

                /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */

                /* ======== Page Styles ======== */

                /**
                * @tab Mobile Styles
                * @section template width
                * @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
                */
                #templateContainer{
                    max-width:600px !important;
                    /*@editable*/ width:100% !important;
                }

                /**
                * @tab Mobile Styles
                * @section heading 1
                * @tip Make the first-level headings larger in size for better readability on small screens.
                */
                h1{
                    /*@editable*/ font-size:24px !important;
                    /*@editable*/ line-height:100% !important;
                }

                /**
                * @tab Mobile Styles
                * @section heading 2
                * @tip Make the second-level headings larger in size for better readability on small screens.
                */
                h2{
                    /*@editable*/ font-size:20px !important;
                    /*@editable*/ line-height:100% !important;
                }

                /**
                * @tab Mobile Styles
                * @section heading 3
                * @tip Make the third-level headings larger in size for better readability on small screens.
                */
                h3{
                    /*@editable*/ font-size:18px !important;
                    /*@editable*/ line-height:100% !important;
                }

                /**
                * @tab Mobile Styles
                * @section heading 4
                * @tip Make the fourth-level headings larger in size for better readability on small screens.
                */
                h4{
                    /*@editable*/ font-size:16px !important;
                    /*@editable*/ line-height:100% !important;
                }

                /* ======== Header Styles ======== */

                #templatePreheader{display:none !important;} /* Hide the template preheader to save space */

                /**
                * @tab Mobile Styles
                * @section header image
                * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
                */
                #headerImage{
                    height:auto !important;
                    /*@editable*/ max-width:600px !important;
                    /*@editable*/ width:100% !important;
                }

                /**
                * @tab Mobile Styles
                * @section header text
                * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
                */
                .headerContent{
                    /*@editable*/ font-size:20px !important;
                    /*@editable*/ line-height:125% !important;
                }

                /* ======== Column Styles ======== */

                .templateColumnContainer{display:block !important; width:100% !important;}

                /**
                * @tab Mobile Styles
                * @section column image
                * @tip Make the column image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
                */
                .columnImage{
                    height:auto !important;
                    /*@editable*/ max-width:260px !important;
                    /*@editable*/ width:100% !important;
                }

                /**
                * @tab Mobile Styles
                * @section left column text
                * @tip Make the left column content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
                */
                .leftColumnContent{
                    /*@editable*/ font-size:16px !important;
                    /*@editable*/ line-height:125% !important;
                }

                /**
                * @tab Mobile Styles
                * @section right column text
                * @tip Make the right column content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
                */
                .rightColumnContent{
                    /*@editable*/ font-size:16px !important;
                    /*@editable*/ line-height:125% !important;
                }

                /* ======== Footer Styles ======== */

                /**
                * @tab Mobile Styles
                * @section footer text
                * @tip Make the body content text larger in size for better readability on small screens.
                */
                .footerContent{
                    /*@editable*/ font-size:14px !important;
                    /*@editable*/ line-height:115% !important;
                }

                .footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
            }
        </style>
    </head>
    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
        <center>
            <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
                <tr>
                    <td align="center" valign="top" id="bodyCell">
                        <!-- BEGIN TEMPLATE // -->
                        <table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
                            <tr>
                                <td align="center" valign="top">



                                </td>
                            </tr>
                            <tr>
                                <td align="center" valign="top">
                                    <!-- BEGIN HEADER // -->
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
                                        <tr>
                                            <td valign="top" class="headerContent">
                                                <img src="http://gallery.mailchimp.com/2425ea8ad3/images/header_placeholder_600px.png" style="max-width:600px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
                                            </td>
                                        </tr>
                                    </table>
                                    <!-- // END HEADER -->
                                </td>
                            </tr>
                            <tr>
                                <td align="center" valign="top">
                                    <!-- BEGIN COLUMNS // -->
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateColumns">
                                        <tr mc:repeatable>
                                            <td align="center" valign="top" class="templateColumnContainer" style="padding-top:20px;">
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%">


                                                    <tr>
                                                        <td valign="top" class="leftColumnContent" mc:edit="left_column_content">
                                                            <h3>Dear First Name</h3>
                                                            Veuillez vous joindre à nous à la <b>Galerie MX,</b> pour une soirée d’art contemporain exceptionnel accompagné de coquetels et de délicieuses bouchées, à l’occasion de notre événement annuel de réseautage! 
                                                            <br /><br />
C’est notre façon de vous remercier et de renouer avec nos clients et nos partenaires du secteur, à Montréal.
                                                            <br />
                                                            <br />
                                                            <b>Le mercredi 4 novembre 2015</b> <br />
de 17 h à 19 h 30<br /><br /><br /><br />

                                                            333, avenue Viger O. <br />
Montréal (Québec)<br /><br />

Veuillez nous <b>confirmer</b> votre présence au plus tard le 
                                                            <b>2 novembre.</b><br /><br />

<span style="color:#752864; font-weight:bold; font-family: Tahoma; sans-serif; text-align: center"><b>Nous espérons pouvoir compter sur votre présence! </b>
                                                            </span></td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <!-- ADD DIVIDER LINE HERE? // -->

                                            <!-- // END DIVIDER LINE HERE? -->



                                            <td align="center" valign="top" class="templateColumnContainer" style="padding-top:20px;">
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%">

                                                    <tr>
                                                        <td valign="top" class="leftColumnContent" mc:edit="left_column_content">
                                                            <h3>Dear First Name</h3>
                                                            We’re inviting you to join us at our annual networking event for an evening of great food and drinks, and fantastic contemporary art at <b>Galerie MX!</b>
<br /><br />
It’s our way of saying thanks and connecting with our clients and industry partners in Montreal.
                                                            <br />
                                                            <br />
                                                            <b>Wednesday, November 4, 2015</b> <br />
5:00 – 7:30 p.m.<br /><br /><br />

                                                            333 Avenue Viger O. <br />
Montréal, QC<br /><br />

Please <b>RSVP</b> by <b>November 2<sup>nd</sup></b> to confirm your attendance.<br><br><br>
<span style="color:#752864; font-weight:bold; font-family: Tahoma; sans-serif; text-align: center"><b>We look forward to seeing you there! </b>
                                                            </span></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <!-- // END COLUMNS -->


                                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
                                        <tr>
                                            <td valign="top" class="headerContent">
                                                <img src="http://gallery.mailchimp.com/2425ea8ad3/images/header_placeholder_600px.png" style="max-width:600px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
                                            </td>
                                        </tr>
                                    </table>

                                </td>
                            </tr>
                            <tr>
                                <td align="center" valign="top">



                                </td>
                            </tr>
                        </table>
                        <!-- // END TEMPLATE -->
                    </td>
                </tr>
            </table>
        </center>
    </body>
</html>