I have some issues with my tables. I create two tables, one under the other and I want to center elements but I'm having issues with his part. My elements aren't vertically aligned and also they aren't really centered as you can see on the picture below.
The code is the following one:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import Table from 'react-bootstrap/Table';
<Table>
<tbody>
<tr>
<td style={{width:"33%", textAlign: 'center', wordWrap: 'break-word', overflowWrap: 'break-word', width:"33%"}}>
<p> Negative = 0, Neutral = 1, Positive = 2.</p>
</td>
<td style={{width:"33%"}}>
<p style={{display: 'flex', justifyContent:'center', alignItems:'center'}}> Filter the prediction </p>
<input
style={{display: 'flex', justifyContent:'center', alignItems:'center'}}
className="form-control input-sm"
name="filter"
type="text"
maxLength="1"
pattern="0|1|2"
/>
</td>
<td style={{textAlign: 'center', wordWrap: 'break-word', overflowWrap: 'break-word', width:"33%"}}>
<center>
<p style={{color:'#FFA500', fontSize:20}}> In order to download the CSV file, you must validate each highlighted line</p>
</center>
</td>
</tr>
</tbody>
</Table>
<Table striped bordered hover className='dataTable'>
<thead>
<tr>
<th>#</th>
<th>Text</th>
<th>PyFeel</th>
<th style={{whiteSpace:'nowrap'}}>
Google CNL
</th>
<th>Cancellation</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</Table>(I don't know how to add the react-bootstrap to the snippet)
How can I align and center my first table elements ?