I've been having trouble extending the buynow button to match the length of the paper box(@material-ui) above. The buynow button is being used with react-bootstrap, and although I've checked the raectbootstrap site, I couldn't find any useful information on how to change the size of the button. Any suggestions would be greatly appreciated.
https://i.sstatic.net/Yie47.png
-Snippet of code below
<div style={{ float: "right", paddingRight: "5rem" }}>
<TableContainer
className="basket-summary"
component={Paper}
style={{ float: "right", top: "0", display: "flex", flexDirection: "column", maxHeight: "9vw", maxWidth: "14vw" }}
>
<Table >
<TableHead>
<TableRow>
<TableCell>Summary </TableCell>
</TableRow>
</TableHead>
<TableBody>
<tr>
<td>SubTotal:{totalPrice}</td>
</tr>
<tr>
<td></td>
</tr>
</TableBody>
</Table>
</TableContainer>
<ButtonGroup aria-label="quantityofproduct">
<Button className=" button-block" variant="primary" name="subtract" value="subtract" onClick={() => buyNow(basketItems)}>
Buy Now
</Button>
</ButtonGroup>
</div>
-CSS formatting
.basket-summary {
min-height: 15rem;
min-width: 10rem;
padding-bottom: 1rem;
margin-top: 10rem;
}