title: Making Span tag cover entire width of button
body: <p>I have the following structure:</p>
  
  <pre><code>&lt;div class="top"&gt;
    &lt;button class="wrap"&gt;
      &lt;span class="text"&gt;Hello&lt;/span&gt;
    &lt;/button&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I have the following CSS:</p>
  
  <pre><code>.top{
    background-color:yellow;
    width: 216px;
    height: 70px;
  }
  
  .wrap, .text{
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
  }
  </code></pre>
  
  <p>I have seen several posts regarding the "span taking the entire width of their parent" and the most popular answer was to make it <code>display: block;</code></p>
  
  <p>But in this case, it doesn't work. If you inspect, you will see that the span is taking 200px width instead of 216px width (width of button). </p>
  
  <p>How can I fix this problem? Here is the <a href="https://jsfiddle.net/ShellZero/3qz3qrdg/15/" rel="noreferrer">fiddle</a></p>