我正在自学前端开发，我正在尝试使用React和样式组件构建一个简单的MyAccount页面。我想创建一个简单的布局与标签和按钮像这样（但当然更漂亮）:

布局

这是标签和按钮的当前情况

以下是myAccount代码:

import React, {useState} from 'react'
import styled, {createGlobalStyle} from 'styled-components'
import ClearIcon from '@material-ui/icons/Clear';
import css from '../components/css/MyAccount.css'

const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css?family=Raleway');
 body {
font-family: 'Raleway', sans-serif;
}`


function MyAccount(props) 
{

return(
    <>
       <GlobalStyle></GlobalStyle>
      <div className='MyAccount'>
        <div className='CloseButton1'> <ClearIcon fontSize='large' onClick={props.onClose}> 
 </ClearIcon> </div>
    <label>Email</label>
      <Button>Edit</Button>
    <label>Username</label>
        <Button>Edit</Button>
      </div>
    </>
)
}

const Button = styled.button`
color: #000;
background-color: #00FF60;
font-size: 1em;
border: 2px solid #00ff60;
border-radius: 8px;
height:10%;
width:10%;
margin: 0 auto;
padding: 0;
vertical-align: middle;

&:hover {
background-color: #16161b;
color: #f1f1f1;
border-color: #f1f1f1;
}
`;

export default MyAccount

标签在myAccount.css中有自己的css（现在它是空的，因为我不知道如何做我要做的事情），下面是它:

.MyAccount{
 display: flex;
 position: absolute;
 width: 800px;
 height: 400px;
 top:10%;
 justify-content: center;
 align-content: center;
 left:15%;
 border-radius: 12px;
 z-index: 1200;
 box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
 background: #0b0b0b;
 color: white;
 border: 1px solid green;
 }

.label{
 }


@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 1680px) {
 .MyAccount{
   left: 25%;
}
}

@media only screen and (min-width: 1680px) {
 .MyAccount{
  left: 560px;
}
}