CSS - как исправить первый <td> в таблице сверху, если второй <td> является многострочным?

Question

В следующем коде показано изображение «Загрузить изображение» в начале td (из-за многострочного ввода в следующем td). Но я хочу, чтобы этот текст был исправлен наверху. Как я могу это сделать?

<table> 
 
    <tr> 
 
    <td> Upload Image </td> 
 
    <td> <input type="file" name="images[]" /> <br> 
 
     <input type="file" name="images[]" /> <br> 
 
     <input type="file" name="images[]" /> <br> 
 
     <input type="file" name="images[]" /> <br> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

Использование vertical-align: top к td с текстом - см демо ниже:

table tr > td:first-child { 
 
    vertical-align: top; 
 
}

<table> 
 
    <tr> 
 
    <td>Upload Image</td> 
 
    <td> 
 
     <input type="file" name="images[]" /> 
 
     <br> 
 
     <input type="file" name="images[]" /> 
 
     <br> 
 
     <input type="file" name="images[]" /> 
 
     <br> 
 
     <input type="file" name="images[]" /> 
 
     <br> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Использование ниже кода вы можете достичь этого Загрузить изображение в верхней части первой строки

<table> 
    <tr> 
    <td colspan="4" valign="top"> Upload Image </td> 
    <td> <input type="file" name="images[]" /> <br> 
     <input type="file" name="images[]" /> <br> 
     <input type="file" name="images[]" /> <br> 
     <input type="file" name="images[]" /> <br> 
    </td> 
    </tr> 
</table> 

Answer 3

Вам это нужно?

<table> 
<tr style="display:flex;"> 
<td style="flex:1;"> Upload Image </td> 
<td> <input type="file" name="images[]" /> <br> 
    <input type="file" name="images[]" /> <br> 
    <input type="file" name="images[]" /> <br> 
    <input type="file" name="images[]" /> <br> 
</td>