Float vs. Table vs. Flex vs. Grid

If you were to rate these from best to worst to use, what would you say?

Is one of these better to use than the rest?

Float:
https://jsfiddle.net/skg6fcL2/3/

.container {
  width: 936px;
  padding: 25px;
  overflow: hidden;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-left {
  float: left;
  margin: 0;
}

.container-right {
  float: right;
}

Table:
https://jsfiddle.net/skg6fcL2/5/

.container {
  display: table;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-left,
.container-right {
  display: table-cell;
  vertical-align: top;
}

.container-right {
  padding: 0 0 0 64px;
}

Flex:
https://jsfiddle.net/skg6fcL2/16/

.container {
  display: flex;
  justify-content: space-between;
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

Grid
https://jsfiddle.net/skg6fcL2/18/

.container {
  display: grid;
  grid-gap: 64px;
  grid-template-columns: auto auto;
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  overflow: hidden;
  border: 2px solid #0059dd;
  background: #000000;
}