SVG line between columns
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="column">
<h3>Content</h3>
<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
</div>
<svg viewbox="0 0 100 100" preserveAspectRatio="none">
<line x1="50%" x2="50%" y1="0" y2="100%" style="stroke:rgb(235,235,235);stroke-width:1" />
Sorry, your browser does not support inline SVG.
</svg>
<div class="column">
<h3>Content</h3>
<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
</div>
</div>
</body>
</html>
CSS
html, body {
width: 100%;
height: 100%;
}
div.container {
margin: 40px auto;
width: 70%;
display: flex;
align-items: center;
}
.column {
display: inline-block;
width: 40%;
}
.column h3{
color: #1c3653;
font-size: 20px;
margin: 0px;
}
.column p {
color: #1c3653;
font-size: 15px;
}
svg {
display: block;
/*height: 100%;*/
width: 20%;
align-self: stretch;
}