I have two text-boxes whose ratio of width is supposed to be 2:1, I can do that using flex. But when I change the font-size to 300% the width of the text boxes becomes equal.  

How do I avoid that and keep the width in the ratio 2:1?

Here's the Code:

```css
input[type=text] {
  font-size: 300%;
}
#b4 {
  flex: 2;
}
#b2 {
  flex: 1;
}
div {
  display: flex;
  width: 100%;
}
```

```html
<div>
  <input type="text" id="b4"></input>
  <input type="text" id="b2"></input>
</div>
```

Also, I don't want to set fixed width to any text-box.