title: Cant align svg and <p> on the same line with display:inline-block?
body: <p>Alright, im sure this is a simple solution but I can't get this to align here. I have generated HTML that looks like:</p>
  
  <pre><code>&lt;div id = "innerCal"&gt;
  &lt;div id = "calCell"&gt;&lt;p&gt;[&lt;/p&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 443"&gt;&lt;defs&gt;&lt;filter x="-50%" y="-50%" width="200%" height="200%" id="Blur7"&gt;&lt;feGaussianBlur stdDeviation="25" /&gt;&lt;/filter&gt;&lt;g id="" data-name="Layer 1"&gt;&lt;rect class="cls-1" width="900" height="758"/&gt;&lt;/g&gt;&lt;g id="Img7"&gt;&lt;path class="cls-1" d="M227.42,144.69v89.77c0,4.07,6.32,4.08,6.32,0V144.69C233.74,140.62,227.42,140.62,227.42,144.69Z"/&gt;&lt;path class="cls-1" d="M221.19,146.76q2.69-3.33,5.6-6.47c.93-1,1.87-2,2.83-3l1.52-1.52.93,1.46,2.44,3.81,4.87,7.63a3.16,3.16,0,0,0,5.46-3.2l-5.6-8.76-2.92-4.58c-1.1-1.71-2.36-3.37-4.62-3.37-3.53,0-6.14,3.58-8.35,5.92s-4.52,5-6.64,7.56a3.28,3.28,0,0,0,0,4.48C217.83,147.87,220.1,148.09,221.19,146.76Z"/&gt;&lt;path class="cls-1" d="M286.33,281.85c-.22-1.64-.35-3.28-.44-4.92v0l0-7.44a3.19,3.19,0,0,0-3.16-3.16,3.24,3.24,0,0,0-3.17,3.16,68.82,68.82,0,0,0,0,7.6q-10.76-7.95-21.45-16-6.1-4.57-12.25-9.12c-4.33-3.2-8.62-6.81-13.51-9.13a20,20,0,0,0-14.28-1.44c-5.47,1.48-10.79,3.85-16.1,5.82l-33.34,12.35-31.93,11.83L141,259.77a3.19,3.19,0,0,0-2.21-3.89c-1.83-.5-3.23.63-3.89,2.21q-2.76,6.57-5.53,13.13a2.39,2.39,0,0,0,0,1.8,18.53,18.53,0,0,0-.83,2.41A3.61,3.61,0,0,0,129,279a5.89,5.89,0,0,0,3.25,2.42c1.61.61,3.23,1.2,4.84,1.8l9.68,3.59a3.18,3.18,0,0,0,3.89-2.2,3.24,3.24,0,0,0-2.21-3.9l-8.06-3-1.29-.48,57.74-21.39,16.67-6.17c4.79-1.78,9.38-3.77,14.46-1.9,4.71,1.73,8.79,5.25,12.78,8.19s8.12,6,12.16,9q11.91,8.91,23.84,17.76l-5.91,2.16a3.16,3.16,0,0,0,1.68,6.1l6.82-2.49c2.52-.91,5.35-1.65,6.28-4.5,0-.07,0-.14.05-.21A2.42,2.42,0,0,0,286.33,281.85Z"/&gt;&lt;/g&gt;&lt;/defs&gt;&lt;use style="fill:pink;" filter="url(#Blur7)" xlink:href="#Img7"transform="translate(0,0)"/&gt;&lt;use style="fill:white;" xlink:href="#Img7"/&gt;&lt;/svg&gt;
  &lt;p&gt;]&lt;/p&gt;&lt;h2&gt;01-02-2020 10:00AM&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This creates this, where the svg prevents the <code>&lt;p&gt;</code>'s from being all on the same line. 
  <a href="https://i.stack.imgur.com/ob3DN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ob3DN.png" alt="enter image description here"></a></p>
  
  <p>I want the <code>&lt;p&gt;</code>'s and the svg on the same line, with the h2 below:</p>
  
  <p><a href="https://i.stack.imgur.com/uaMxf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uaMxf.png" alt="enter image description here"></a></p>
  
  <p>Css:</p>
  
  <pre><code>#innerCal {
          position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
              overflow-y: scroll;
              text-align: center;
      }
  #calCell {
      //display: inline-block;
      width: 150px;
  }
  
  #calCell &gt; p {
      display: inline-block;
  }
  
  #calCell &gt; svg {
  display: inline-block;
  }
  
  #calCell &gt; h2 {
      display: block;
      text-transform: uppercase;
  }
  </code></pre>
  
  <p>There will be many of these generated and I need them all to sit next to each other in line like a calendar. What is wrong here?</p>