title: why input type=date is different width to input type=text?
body: <p>Within the same container input text with display: block stretches to fill available space as expected but if I change type to 'date' it becomes shorter. Why?</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div class="panel"&gt;
      &lt;div class="input-group"&gt;
        &lt;label for="text1"&gt;text1&lt;/label&gt;
        &lt;input id="text1" type="text"/&gt;
      &lt;/div&gt;
      &lt;div class="input-group"&gt;
        &lt;label for="date"&gt;date&lt;/label&gt;
        &lt;input id="date" type="date" /&gt;
      &lt;/div&gt;
      &lt;div class="input-group"&gt;
        &lt;label for="text2"&gt;text2&lt;/label&gt;
        &lt;input id="text2" type="text" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.panel {
      display: flex;
      flex-wrap: wrap;
  }
  
  .input-group {
      flex-grow: 1;
      text-align: left;
  }
  
  label, input {
    display: block;
  }
  </code></pre>
  
  <p>Result: text1 and text2 are the same size but date is shorter.</p>
  
  <p><a href="https://jsfiddle.net/e0v13ns3/" rel="nofollow noreferrer">https://jsfiddle.net/e0v13ns3/</a></p>