Float vs. Table vs. Flex vs. Grid

HTML-CSS
#1

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;
}
#2