This is my HTML code :-
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Text Overlay on Image</title><link rel="stylesheet" href="styles.css"></head><body><div class="image-container"><img src="first_bg.png" alt="Image"></div><div class="container"><div class="personal-details"><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4></div><div class="school-details"><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4></div><div class="second-personal-details"><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4></div><div class="education-details"><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4><h4>Your multiline text goes here.</h4></div></div></body></html>This is CSS code :-
body { font-family: Arial, sans-serif; margin: 0; padding: 0;}.image-container img { display: block; max-width: 100%; height: auto;}.container { margin-bottom: 3px; text-align: left; margin-left: 140px; position: absolute; top: 320px; bottom: 120px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 20px; box-sizing: border-box;}.container h4 { margin: 10px 0; flex: 1;}.container .personal-details,.container .school-details,.container .second-personal-details,.container .education-details { flex: 1; display: flex; flex-direction: column;}.container .personal-details h4,.container .school-details h4,.container .second-personal-details h4,.container .education-details h4,.container .family-details h4 { font-weight: bold; margin-bottom: 5px;}Now i have multiple div inside parent div. parent div has given child div. But sometime whole div may be not present e.g education-details. Or there might be case that some h4 tags are not present. This simply means number of h4 tags inside parent div are varying. but max possible h4 tags are 20.
SO here I want h4 tags to automatically adjust there space in-between if there are 16 or 17 or 19 h4 tags.
Tried flex attribute from css