表格与输入的CSS对齐不正确

如何解决表格与输入的CSS对齐不正确

这是我的问题，我正在尝试将我的输入和表与flexBox放在div内，但是当我尝试将它们彼此相邻放置时，它们会更改其度量并且无法正确对齐，我认为这是一个百分比问题，但我实际上不知道：

这就是我想要的：

但这就是我得到的：

在显示代码之前，我想清除一些内容： w-100的className表示宽度：100％； 我将输入放入名为InputForm的组件中，在其中输入百分比。

我的父容器：

const WithdrawalInfoContainer = ({ bitcoinPrice = '$0.000',myWalletPrice = '$0.000' }) => (
    <div className='w-100'>
      <div className='w-100 withdrawalInfoContainer'>
        <h1 className='titleInfo'>Withdrawal Info</h1>
        
        <div className='w-100 inputTableInfoContainer'>
        
          <InputForm header='Withdrawal Method:' percentajeWidth='50%'/>
          
          <div className='tableInfoContainer'>
            <table>
              <thead>
                <tr>
                  <th id='withdrawalMethodInfo'>Withdrawal Method</th>
                  <th id='withdrawalamountInfo'>Minimal Withdrawal Amount</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Bitcoin</td>
                  <td>{bitcoinPrice}</td>
                </tr>
                <tr>
                  <td>My Wallet</td>
                  <td>{myWalletPrice}</td>
                </tr>
              </tbody>
            </table>
          </div>
          
        </div>
      </div>
    </div>
);

我父母的CSS：

.withdrawalInfoContainer {
  width: 100%;
  background-color: #D5D4D4;
  border-radius: 5px;
  min-height: xxx;
  overflow: hidden;
  padding: 0 10px;
  padding-bottom: 10px;
  margin-bottom: 5%;
}

.inputTableInfoContainer {
  display: flex;
  flex-direction: row;
}

.titleInfo {
  margin: 0;
  margin-top: 1%;
  font-weight: lighter;
  width: 60%;
  color: #6A6969;
  border-bottom: 5px solid #2C2A2A;
}

.tableInfoContainer {
  width: 45%;
}

.tableInfoContainer th {
  background-color: #575555;
}

#withdrawalMethodInfo {
  width: 50%;
}

#withdrawalaccountInfo {
  width: 50%;
}

输入表单组件：

const InputForm = ({ header,type = 'text',percentajeWidth,...otherProps }) => (
    <div className='containerInputForm'>
      <label className='headerLabel' for={header}>{header}</label><br />
      <input className='inputForm' name={header} type={type} style={{ width: `${percentajeWidth}`}} {...otherProps}/>
    </div>
)

输入表单组件的CSS：

.containerInputForm {
  margin-top: 10px;
}

.headerLabel {
  font-size: 18px;
  color: black;
  letter-spacing: 2px;
}

.inputForm {
  background-color: #E1DFDF;
  border: none;
  padding:10px;
}

.inputForm:focus {
  background-color: #d1cfcf;
}

我不知道实际上是什么，但我怀疑这是一个百分比问题，我尝试将所有物品放进w-100，但不起作用。提前非常感谢！