title: Can't target last of type in React Styled Component input
body: <p>Hi using Styled components with React - building a split date input for day/month/year - the only change I want to make is that the width of the year input is double the length of the other two inputs, I've tried using <code>:nth</code> <code>last-of-type</code> etc but to no avail, I have a suspicion it is because how I'm rendering the inputs as components? Can anyone advise of a nice workaround?</p>
  <p>Code:</p>
  <pre><code>const StyledInput = styled.input`
  
    display: block;
  
    height: 48px;
    width: 50px;
    margin-right: 12px;
    margin-top: 12px;
  `;
  
    return (
      &lt;StyledInputGroup&gt;
        &lt;label&gt;
        &lt;span&gt;Day&lt;/span&gt;
        &lt;StyledInput
          type=&quot;text&quot;
          maxLength=&quot;2&quot;
          label=&quot;Day&quot;
          value={day}
          onChange={(e) =&gt; setDay(e.target.value)}
        /&gt;
        &lt;/label&gt;
        &lt;label&gt;
        &lt;span&gt;Month&lt;/span&gt;
        &lt;StyledInput
          type=&quot;text&quot;
          maxLength=&quot;2&quot;
          label=&quot;Month&quot;
          value={month}
          onChange={(e) =&gt; setMonth(e.target.value)}
        /&gt;
        &lt;/label&gt;
        &lt;label&gt;
        &lt;span&gt;Year&lt;/span&gt;
        &lt;StyledInput
          type=&quot;text&quot;
          maxLength=&quot;4&quot;
          value={year}
          onChange={(e) =&gt; setYear(e.target.value)}
        /&gt;
        &lt;/label&gt;
      &lt;/StyledInputGroup&gt;
    );
  
  </code></pre>
  <p>Simplified codepen:
  <a href="https://jsfiddle.net/4xzn8a5q/11/" rel="nofollow noreferrer">https://jsfiddle.net/4xzn8a5q/11/</a></p>