Please help me solve this problem How to fill in a row of dots in the blank space between food name and price in reactjs? (picture example) I'm using Material UI library for my project, enter image description here
I'm using the Material UI library for my project
<Grid container spacing={2}>
{coffeeMenu.map((item, index) => (
<Grid item xs={6} key={index}>
<Link
underline='none'
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
px: 5,
fontWeight: 'bold',
color: '#000',
'&:hover': {
color: '#D8AE78',
cursor: 'pointer',
},
}}
>
<Typography>{item.name}</Typography>
<Typography>{item.price}đ</Typography>
</Link>
</Grid>
))}
</Grid> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can add a div with a dotted border between the food name and price. I'd need to see your code to show you exactly how to do it, but something like this would work:
.container { width: 50%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .food_name { margin-right: 20px; } .food_price { margin-left: 20px; } .dashed_line { flex: 1; border-top: 1px dashed black; }