I tried to make them inline by changing their display to inline-flex and item-align to borderline but it dosent work.
input[type="checkbox"] { display: none;}input[type="checkbox"]+label::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 3px; background: #fff; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);}input[type="checkbox"]:checked+label::before { background-color: #4caf50; border-color: #4caf50;}input[type="checkbox"]:checked+label::after { content: "✓"; position: absolute; left: 4px; top: -2px; color: #fff; font-size: 18px; line-height: 20px;}.checkbox-container { display: flex; align-items: baseline;}
<main><h1 id="title">Survey form</h1><p id="description"> Thank you for taking time to help us improving this site</p><div class="imp"><form id="survey-form"><fieldset><div><label for="question">Would you use this website in future?<br /><input type="radio" value="yes" name="question" id="question" checked />Yes<input type="radio" value="no" name="question" id="question" />No</label></div><div class="checkbox-container"><input type="checkbox" value="Anime" id="best-part-anime" name="best-part" /><label for="best-part-anime">Anime streaming in 4K quality</label></div><div class="checkbox-container"><input type="checkbox" value="Manga" id="best-part-manga" name="best-part" /><label for="best-part-manga">Manga in HD quality</label></div><div class="checkbox-container"><input type="checkbox" value="Torrent" id="best-part-torrent" name="best-part" /><label for="best-part-torrent">Torrent streaming</label></div><div class="checkbox-container"><input type="checkbox" value="Other" id="best-part-other" name="best-part" /><label for="best-part-other">Other</label></div><div><label for="Other">(Please specify your problen in certain or any other feedback)<textarea id="other" name="other" value="other" placeholder="Tell us more about your problem"></textarea></label></div></fieldset><button type="submit" value="Submit" id="submit">Submit</button></form></div></main>
pls help me when inspect to do so it works but after i do same(what i edit there) in vs code it dosent work....
I want to make the labels and checkboxes appear in same line... but I can't figure out what's wrong here