title: Vertical line pushing text below it
body: <p>Hi guys so i am trying to create a desgin which is reposive in bootstrap were i have a vertical line coming down and then some text near it like this : <a href="https://i.stack.imgur.com/dWHTO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dWHTO.png" alt="enter image description here"></a></p>
  
  <p>I have manged to create this fine using bootstrap 3 grid system, the problem is , when i resize my window i was hoping the line would get smaller but what it does is push all my text below it , when i want the line to and text to stay exactly the same </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header class="masthead"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-1"&gt;
              &lt;div class="verticalLine"&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-7"&gt;
               &lt;div class="maintext"&gt;
                  &lt;h1&gt;Text&lt;/h1&gt;
                  &lt;h2&gt;Some text goes here&lt;/h2&gt;&lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;h1 style="width: 600px;"&gt;Great design is simplicity and clarity&lt;/h1&gt;&lt;br&gt;
                  &lt;h2 style=" margin-top: -19px;"&gt;Idea - Design - launch&lt;/h2&gt;&lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;p style="font-size: 19px;"&gt;View profile ➡&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.verticalLine {
    border-left: thick solid #ff0000;
    height: 850px;
  }
  </code></pre>
  
  <p>Fiddle link : <a href="https://jsfiddle.net/DTcHh/38278/" rel="nofollow noreferrer">here</a> You can see when the window is shrunk all my text goes below it, even if i use media queries still nothing happens</p>