[Material UI]ウィンドウサイズを変更しても、テキストフィールドが親コンポーネントをはみださないようにしたい

聞きたいこと

FormControl, FormControlLabelを使用して、画面全体に広がるラジオボタンを作成し、FormControlLabel上にテキストフィールドを設置したいと思っています(参考画像1参照)

ただ現状、ブラウザの幅を小さくしていくと、テキストフィールドがFormControlLabelからはみ出してしまっています。(参考画像2参照)
ブラウザの幅に関わらず、常にFormControlLabelの幅の95%くらいを幅をテキストフィールドの持たせるにはどのようにすればいいでしょうか。

ソースコード

JavaScript
1import React from "react";
2import { Check } from "@material-ui/icons";
3import {
4  TextField,
5  FormControlLabel,
6  FormControl,
7  Box,
8  Radio
9} from "@material-ui/core";
10
11export default function FormPropsTextFields() {
12  return (
13    <>
14      <Box mt={2} mb={2} style={{ width: "100%" }}>
15        <FormControl component={"fieldset"} style={{ width: "100%" }}>
16          <Box>
17            <FormControlLabel
18              style={{
19                border: "1px solid black",
20                width: "100%",
21                position: "relative"
22              }}
23              control={<Radio checkedIcon={<Check />} />}
24              label="Text"
25            />
26            <TextField
27              variant="outlined"
28              size={"small"}
29              style={{
30                position: "absolute",
31                width: "90%",
32                top: 2,
33                left: 80
34              }}
35            />
36          </Box>
37        </FormControl>
38      </Box>
39    </>
40  );
41}
42