When an element with the class "answer accepted" is absolutely positioned, it is taken out of the flex formatting context. As a result, most flex properties will not have any effect on it anymore. (Refer to the flexbox spec: §4.1. Absolutely-Positioned Flex Children)
Try removing the attribute "position: absolute" from the checkbox.
Make three small modifications to your CSS code:
.label.reverse {
flex-direction: row-reverse;
justify-content: space-between; /* new; align items to opposite ends */
flex: 1; /* new; make container the full width of parent */
}
.label:before {
/* position: absolute; */ /* keep item in flex formatting context */
display: block;
width: 20px;
height: 20px;
content: "";
background-color: #fff;
border: 1px solid black;
border-radius: 4px;
}
.wrapper {
position: relative;
display: inline-flex;
min-height: 1.5rem;
border: 1px solid black;
margin-right: 1rem;
padding: 0.5rem;
width: 200px;
}
.input {
position: absolute;
z-index: -1;
visibility: hidden;
}
.label-wrapper {
margin-left: 24px;
margin-right: 0;
}
.label.reverse>.label-wrapper {
margin-left: 0;
margin-right: 24px;
}
.label {
position: relative;
margin-bottom: 0;
display: flex;
flex-direction: row;
}
.label.reverse {
flex-direction: row-reverse;
justify-content: space-between; /* new; align items to opposite ends */
flex: 1; /* new; make container the full width of parent */
}
.label:before {
/* position: absolute; */
display: block;
width: 20px;
height: 20px;
content: "";
background-color: #fff;
border: 1px solid black;
border-radius: 4px;
}
.label:after {
position: absolute;
display: block;
height: 20px;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
}
input[type="checkbox"]:checked~.label::after {
background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
width: 20px;
height: 20px;
}
<div class="wrapper">
<input class="input" name="checkbox2" id="checkbox2" type="checkbox">
<label class="label reverse" for="checkbox2">
<div class="label-wrapper">
Option 1
</div>
</label>
</div>