Flex Input, label and span

[codeispoetry]

<div class="bbuynow_inner">
  <input type="checkbox" id="option_1" name="option_1">
  <label for="option_1">Addon service 1	<svg class="svgcheckbox" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M13 50.986L37.334 75 88 25" stroke-width="15" stroke="#66bb6a" fill="none" fill-rule="evenodd" stroke-dasharray="150" stroke-dashoffset="150"></path></svg>
  </label><span class="license_price bold">€99</span>
</div>

Input, Label, and span aren’t they the child of bbuynow_inner?

.bbuynow when set to display flex and space-between. I was expecting the input to be on the left label to be in center and span to be on right.

That is not happening.

[Andres_Vaquero]

Did you set flex-direction to row? You may want to post your CSS as well as tell us what you see instead?

[codeispoetry]

@Andres_Vaquero

Did you set flex-direction to row ? You may want to post your CSS as well as tell us what you see instead?

Le[quote=“Andres_Vaquero, post:2, topic:342600”]
Did you set flex-direction to row ?
[/quote]

Yes,

.bbuynow_inner {
    /* text-align: center; */
    display: flex !important;
    justify-content: space-between;
    flex-direction: row;
}

[Andres_Vaquero]

Then it might be due to the styles set to any of those children…

[PaulOB]

@codeispoetry

That is not happening.

Explain what is happening?

Also show the styles applied to parent and children

[codeispoetry]

@PaulOB

Explain what is happening?

Also show the styles applied to parent and children

Hello there @PaulOB, I hope you are doing great and excellent.

Sir,

This is the place where things are not working because the CSS there is too complex:
https://wordbecca.com/product/sample-product/

The 1, 2 and 3 are the three child of the .bbuynow_inner

I was anticipating to make the full use of the horizontal space available here →

1 towards left ←
2 towards center
3 towards right →

[PaulOB]

You are mistakenly thinking that the checkbox you see is the actual input element but the actual input element is hidden to make way for the replacement checkbox svg image (which is contained within the label). Therefore the label contains both the visual checkbox and the text within the same flexbox item which means it moves as a whole unit.

If you removed the svg and made the actual input visible then you would see that the space between is working.

Unfortunately it would be a flawed concept as far as flexbox is concerned because the items would not be aligned in rows as flexbox is not a grid spec. That means that £199 on the right would take up more space than the £99 above it and thus the text would not align in a vertical row because it is centred between the checkbox and the price.

If I were you I would do this instead which aligns the checkbox and label to text to the left and the price to the right and looks much neater.

.bbuynow_inner{
    display:flex;
}
.bbuynow_inner span{margin-left:auto;}

[codeispoetry]

@PaulOB

.bbuynow_inner{ display:flex; } .bbuynow_inner span{margin-left:auto;}

Thanks, I think the above ↑ + This one can achieve what we wish to achieve:

<div class="bbuynow_inner">
  <input type="checkbox" id="option_1" name="option_1">
  <label for="option_1"><svg class="svgcheckbox" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M13 50.986L37.334 75 88 25" stroke-width="15" stroke="#66bb6a" fill="none" fill-rule="evenodd" stroke-dasharray="150" stroke-dashoffset="150"></path></svg> </label>
  <label for="option_1">Addon service 1	</label>
  <span class="license_price bold">€99</span>
</div>

But in that case add on services and price does not seems to be vertically aligned:

this could also be alternative:

svg.svgcheckbox {

margin-left: -20px;

}

[PaulOB]

It doesn’t look like that to me but remember the svg is not subject to any flex alignment properties. You would need to verticallycenter the svg via other means.

e.g.

Try these additions.

.bbuynow_inner{display:flex;margin:20px 0;}
.bbuynow_inner span{margin-left:auto;}
svg.svgcheckbox {
    left: -20px;
    top:0;
    bottom:0;
    margin:auto;
}

[codeispoetry]

@PaulOB

.bbuynow_inner{display:flex;margin:20px 0;} .bbuynow_inner span{margin-left:auto;} svg.svgcheckbox { left: -20px; top:0; bottom:0; margin:auto; }

Sir,

I was about to write you a message. Your solution seems to be a Perfect solution in the given situation.
Thank you so much for the help.