title: Center text in the space between ICON and right wall
body: <p>I have some header text next to a button for my navigation drawer.</p>
  <p>As shown in the picture below.
  <a href="https://i.stack.imgur.com/9MrYI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9MrYI.png" alt="Example" /></a></p>
  <p>The navigation icon is in the right place.
  I want to be able to center the text between the right side of the navigation icon and the left side of the end of the window.</p>
  <p>What's the best way to do this so it will be responsive/scalable on different device sizes. Most importantly mobile as this is a PWA.</p>
  <p>This is the current html for the top section.</p>
  <pre><code>        &lt;div class=&quot;topBox&quot;&gt;
              &lt;div class=&quot;navigationDrawerButton&quot;&gt;
                  &lt;svg class='navButton' xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;42&quot; height=&quot;46&quot; stroke=&quot;white&quot;&gt;
                      &lt;path d=&quot;M4 32.8148C4 31.7102 4.89543 30.8148 6 30.8148H33C34.1046 30.8148 35 31.7102 35 32.8148V34C35 35.1046 34.1046 36 33 36H6C4.89543 36 4 35.1046 4 34V32.8148Z&quot; fill=&quot;white&quot;/&gt;
                      &lt;path d=&quot;M4 17.2593C4 16.1547 4.89543 15.2593 6 15.2593H33C34.1046 15.2593 35 16.1547 35 17.2593V18.4444C35 19.549 34.1046 20.4444 33 20.4444H6C4.89543 20.4444 4 19.549 4 18.4444V17.2593Z&quot; fill=&quot;white&quot;/&gt;
                      &lt;path d=&quot;M4 3C4 1.89543 4.89543 1 6 1H33C34.1046 1 35 1.89543 35 3V4.18518C35 5.28975 34.1046 6.18518 33 6.18518H6C4.89543 6.18518 4 5.28975 4 4.18518V3Z&quot; fill=&quot;white&quot;/&gt;
                  &lt;/svg&gt;
              &lt;/div&gt;
              
              &lt;h1 class=&quot;prompt&quot;&gt;
                  Select an area to search
              &lt;/h1&gt;
          &lt;/div&gt;
  </code></pre>
  <p>This is my current css.</p>
  <pre><code>.navButton {
      position: absolute;
      top: 2%;
      left: 4%;
      fill: #FFFFFF;
      stroke: #FFFFFF;
      -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
      filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  }
  </code></pre>
  <p>I was thinking I need to wrap them both in a div hence the top box container.</p>
  <p>Any help would be appreciated.</p>