title: How to create a vertical divider in css?
body: <p>I have a react component and want to create a vertical divider(1cm high) between a text and an image:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;span&gt;goodmorning hello user!&lt;/span&gt;
    &lt;span class="divider" /&gt; &lt;img src="./bell.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the css I am using:</p>
  
  <pre><code>.container {
    flex: 1 0 0;
  }
  
  .divider {
    position: absolute;
    left: 50%;
    top: 10%;
    bottom: 40%;
    border-left: 1px solid black;
  }
  </code></pre>
  
  <p>How can I get the vertical line between the excl. mark and image?
  <a href="https://codesandbox.io/s/l7yw0mo85q" rel="nofollow noreferrer">codepen</a></p>