I am trying to center with Flexbox a group of elements (all elements except the "Reset" button) in a div. Then I want to add the Reset button right next to this centered group of elements in the same line, but without the group to adjust their position with Flexbox. So basically the group is centered but the reset button is right next to those elements. I am looking for a efficient and most importantly simple solution, not for "hard coding" the position manually.Code:
.flexbox-div { /* grid-column: span 3; */ display: flex; justify-content: center; align-items: center; position: relative; gap: 1.5rem;}#main-modal-reset-btn-style { cursor: pointer; position: absolute;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>Document</title></head><body><div class="flexbox-div"><span><input type="checkbox" id="modal-filter-repeat-id" name="main-modal-filter-repeat" /><label for="modal-filter-repeat-id"> Only Repeat</label></span><span><select name="main-modal-categories"><option value="allcategories">All categories</option></select></span><span><input type="radio" id="difficulty-all-modal" name="difficultymodal" value="all" checked="checked" /><label for="difficulty-all-modal"> All</label><input type="radio" id="difficulty-easy-modal" name="difficultymodal" value="easy" /><label for="difficulty-easy-modal">Easy</label><input type="radio" id="difficulty-medium-modal" name="difficultymodal" value="medium" /><label for="difficulty-medium-modal"> Medium</label><input type="radio" id="difficulty-modal-hard" name="difficultymodal" value="hard" /><label for="difficulty-modal-hard">Hard</label></span><button class="main-modal-reset-filter" id="main-modal-reset-btn-style"> Reset</button></div><script src="script.js"></script></body></html>Thanks