Space-between elements in container [duplicate]

Question

So I have a container with label text and checkboxes, now this is what I currently have

body {
  display: flex;
  justify-content: center;
}

.container {
  background-color: yellow;
  display: flex;
  width: 200px;
  height: fit-content;
  margin: 0 10px;
  justify-content: space-around;
}

.container.firstCheck{
  flex-grow: 1;
}
.container.secondCheck{
  flex-grow: 1;
}

<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox"/>
    </div>
    <div class="SecondCheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox"/>
    </div>
  </div>
</div>

now I want the label to be at the far left of the container and the checkbox to be at the far right of the container using flexbox. This illustrates my goal .

PS: I also want to be able to reduce html tags if possible.

Answer 1

Use justify-content: space-between to place the items on the left and right of the container. Also, you need to correct the SecondCheck name in CSS. In the HTML structure, it has capital 'S' while in CSS it has small 's'. I have corrected it in my answer. Hope this helps, Thanks!!

body {
  display: flex;
  justify-content: center;
}
.container {
    background-color: #fff;
    display: flex;
    width: 200px;
    height: fit-content;
    margin: 0 10px;
    justify-content: space-around;
    border:2px solid #000;
 }

.container.firstCheck{
  flex-grow: 1;
}

.container.SecondCheck{
  flex-grow: 1;
}

.firstCheck{
    margin-bottom: 20px;
}

.checkboxes{
    width: 100%;
    display: inline-block;
    padding: 20px;
}
.firstCheck, .SecondCheck{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox"/>
    </div>
    <div class="SecondCheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox"/>
    </div>
  </div>
</div>

Answer 2

Use flex on .firstCheck, and .SecondCheck then set margin-left: auto on input. I removed some useless codes, check it out below:

body {
  display: flex;
  justify-content: center;
}

.container {
  background-color: yellow;
  width: 200px;
  height: 150px;
  margin: 0 10px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.checkboxes {
    width: 100%;
    padding: 10px;
}

.firstCheck input, .SecondCheck input {
    margin-left: auto;
}

.firstCheck, .SecondCheck {
    display: flex;
}

<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox" />
    </div>
    <div class="SecondCheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox" />
    </div>
  </div>
</div>