element positioning

Hey, i was wondering how you'd place an element like the purple circle in a layout like this, my first instinct was position absolute but i was curious if there was a better way. Would much appreciate anyone's help with this, thank you in advance.
No description
No description
6 Replies
ChooKing
ChooKing•10mo ago
I would put the purple circle in a flex box. Use justify-content:flex-end in the first one and center in the second one.
snxxwyy
snxxwyy•10mo ago
yeah that seems like a pretty good solution, the container with the input boxes seems to have a border bottom on it so that would knock that layout out which was why my mind went to absolute. Or do you recommend making that line a div in itself and a part of the flex container?
ChooKing
ChooKing•10mo ago
I would make that line a ::before or ::after of the flexbox that holds the circle. That makes it easier to align with the circle than making it part of the input's container.
snxxwyy
snxxwyy•10mo ago
ah i see, thank you!
croganm
croganm•10mo ago
You could indeed use absolute positioning, but I do think I'd try flex in this case as well 🙂
snxxwyy
snxxwyy•10mo ago
awesome, i appreciate the extra hand 🙂