SVG Adding Padding to other elements - html

Question

I'm having some issues getting an SVG to play well in the layout that I have written. Here is the example I have for the working table-cell layout that I have been working on. The first jsfiddle links to the working example. When I replace the text on the left with an SVG for some reason, the content on the right column gets pushed down. Any idea why?
working example
broken example
Working Example HTML:
<div id="wrapper">
<div id="row">
<div id="left-col">
There are many variations of passages of Lorem Ipsum available
</div>
<div id="right_col">
<aside><strong>ASIDE</strong></aside>
<div id="banner1">Banner 1</div>
</div>
</div>
Broken Example HTML:
<div id="wrapper">
<div id="row">
<div id="left-col">
<div id="divMapContainer" class="embed-responsive embed-responsive-1by1">
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect>
</svg>
</div>
</div>
<div id="right_col">
<aside><strong>ASIDE</strong></aside>
<div id="banner1">Banner 1</div>
</div>
</div>
CSS:
body {
background-color: #333;
margin: 1em;
}
#wrapper {
width: 100%;
max-width: 46em;
margin: 0 auto;
}
#media (min-width: 48em) {
/* 768px */
#wrapper {
display: table;
}
header {
display: table-header-group;
}
nav,
#banner2 {
display: block;
}
#row {
/* the rule below is redundant
thanks to SelenlT2
*/
/*display: table-cell;*/
}
#left-col,
#right_col {
display: table-cell;
}
#left-col {
width: 50%;
}
footer {
display: table-footer-group;
}
}
#banner1 {
background-color: #9ed6f9;
height: 50%;
}
#left-col,
#right_col {
background-color: #fff;
}
#right_col {
height: 100%;
}
aside {
background-color: #fbcdfa;
height: 50%;
}
#left-col,
aside {
text-align: left;
padding: .5em;
}
nav,
header,
#banner1,
#banner2,
footer {
text-align: center;
}
.note {
color: #fff;
text-align: center;
}

Answer 1

It's because SVG elements are inline by default. You can set the vertical-align property on your SVG so that the other elements will align to the top of it. See updated fiddle.
svg {
vertical-align: top;
}