Prevent fieldset from resizing contents - html

Question

I tried to resize my <fieldset> element, but it automatically made its contents smaller. Then, I added display:inline-block in my CSS file (as suggested by many answers on a similar topic). However, this doesn't help at all, everything stays the same. What should I do? I'd like a noob-friendly solution, since I'm not that good at CSS, as you may have noticed. Cheers!
fieldset {
display: inline-block;
border: 1px solid blue;
background-color: white;
width: 40%;
}
legend {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
font-size: 15px;
color: white;
background-color: blue;
text-align: left;
}
label {
width: 100px;
margin-right: 30px;
display: inline-block;
text-align: left;
}
input[type=text] {
width: 25%;
padding: 10px 20px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<fieldset>
<legend>XXX</legend>
<label for="username">Username:</label>
<input type="text" name="username">
</fieldset>

Answer 1

If you use percentage on the content's width, it will will change according to the width of the container(fieldset).
Just remove the percentage value.
fieldset {
display: inline-block;
border: 1px solid blue;
background-color: white;
}
legend {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
font-size: 15px;
color: white;
background-color: blue;
text-align: left;
}
label {
width: 100px;
display: inline-block;
text-align: left;
}
input[type=text] {
padding: 10px 20px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<fieldset>
<legend>XXX</legend>
<label for="username">Username:</label>
<input type="text" name="username">
</fieldset>