Align elements in a line but in different positons - html

Question

I am learning HTML and I am trying to align different icons in a line but in a different positions. The first element should be aligned to the left and the others aligned to the right.
E1| |E2|E3|E4
I am not sure how to implement that. Should I use a table? Or a div with <li> elements?
I tried to use a table with a blank column but it's not working
td {
background-color: yellow;
border: 1px solid black;
}
<table>
<tr>
<td width="60%"> test </td>
<td> blank </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</table>

Answer 1

You mean this?
Flex ratio
.box {
display: flex;
}
.box div {
background-color: yellow;
border: 1px solid black;
}
.e1{
flex: .1 0 0;
}
<div class="box">
<div class="e1">E1</div>
<div>E2</div>
<div>E3</div>
<div>E4</div>
</div>
or using table
td {
background-color: yellow;
border: 1px solid black;
}
<table>
<tr>
<td>E1</td>
<td width="60%"> </td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
</table>

Answer 2

A common method for this is to use display: flex for the container and apply margin-left: auto to the first of the child elements that should be moved to the right. That way that left margin will grow as wide as possible within the given container and with the given settings:
.container {
width: 100%;
display: flex;
background: #ccc;
}
.container>div {
padding: 5px 10px;
}
.container>div:nth-child(2) {
margin-left: auto;
}
<div class="container">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
</div>