my purpose here was aling div with problem class to warning icon, regarless what is the size of the page at the moment it will allways follow the error icon and pop-up (it will normally be hidden) right under it under certain conditions, ı first tried using flex while problem box was inside div with warning class, ı failed, now ı though ı could align it with javascript using getBoundingClientRect but ı came accros a ploblem while trying to align it horizontally, ı need your help, if you can help me solve the problem at hand or show me another way of getting effect ı want ı will be gratefull. have a good day
const error = document.querySelector(".error");const problem = document.querySelector(".problem");const button = document.querySelector(".button");const warning = document.querySelector(".warning");window.addEventListener("resize", errorPositioning);function errorPositioning() { const errorRect = error.getBoundingClientRect(); const warningRect = warning.getBoundingClientRect(); console.log(warningRect); problem.style.display = "block"; problem.style.left = `${warningRect.left}px`; problem.style.top = `${errorRect.top - errorRect.top + 20}px`;}errorPositioning();/*function positionErrorMessage() { const errorIcon = document.querySelector(".error"); const errorMessage = document.querySelector(".problem"); const iconRect = errorIcon.getBoundingClientRect(); const iconBottom = iconRect.bottom; const iconLeft = iconRect.left + iconRect.width / 2; errorMessage.style.display = "block"; errorMessage.style.top = `-${iconBottom}px`; errorMessage.style.left = `${iconLeft}px`;}// Initial positioning when the page loadspositionErrorMessage();/*error.addEventListener("click", (e) => { button.classList.toggle("width"); error.classList.toggle("position"); /* error.classList.toggle("asd"); ; if (!e.target.classList.contains("position")) { problem.classList.remove("hidden"); } console.log("oldu"); console.log(e);});window.addEventListener("click", (e) => { console.log(e.target); if ( e.target.classList.contains("error") && !e.target.classList.contains("position") ) { console.log("dogru"); problem.classList.remove("hidden"); } else { console.log("yanlış"); problem.classList.add("hidden"); error.classList.add("position"); }});*/* { margin: 0; padding: 0; font-family: "Josefin Sans", sans-serif;}body { height: 100vh;}.container { display: flex; flex-direction: row; height: inherit;}.left { width: 60%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin-top: 4.5rem; margin-right: auto;}.left-con { max-width: 40rem;}.right { width: 40%; display: flex; justify-content: flex-end;}.image { width: 100%;}.mid { margin-top: 8rem; margin-bottom: 1rem; overflow: hidden; width: 100%;}.opening { font-size: 4.5rem; letter-spacing: 2rem; font-weight: 600; display: inline-block;}.we { color: #bc9496; font-weight: 300;}.lower { font-size: 1.2rem; color: #bc9496;}.form { display: flex; flex-direction: row; align-items: center; margin-top: 2rem; width: 94%; height: 3.5rem; border-radius: 50px; border: 1px solid #eadddf; padding-left: 1rem; overflow-x: hidden; position: relative; z-index: 0;}.email { margin: 0; padding: 0; border: none; width: 100%; border: none;}.email::placeholder { color: #eadddf;}.button { display: flex; justify-content: center; align-items: center; padding-right: 1rem; padding-left: 1rem; height: 100%; width: 5.5rem; border: none; background: linear-gradient(to left, #f49694 0%, #f8acae 50%, #f7b6b8 100%); border-radius: inherit; color: white;}.width { width: 6.75rem;}.warning { display: flex; flex-direction: column; align-items: center; margin-top: 6px; position: relative; padding-right: 1rem;}.problem { position: relative; background-color: #e47579; top: 1px; padding: 0.5rem; display: inline-block; width: 134px; z-index: 3;}.flex-con { display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 100%; overflow: hidden; position: relative; z-index: 0;}.error { width: 24px; height: 24px; flex-grow: 0;}.open { position: relative; left: 2rem;}.hidden { display: none;}.problem::before { content: ""; position: relative; top: -39px; left: 51px; border-width: 15px; border-style: solid; border-color: transparent transparent #e47579 transparent;}@media screen and (max-width: 900px) {}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- displays site properly based on user's device --><link rel="stylesheet" href="style.css"><link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet"><title>Frontend Mentor | Base Apparel coming soon page</title></head><body><div><img src="images/icon-error.svg" alt=""></div><div class="container"><div class="left"><div class="left-con"><img src="images/logo.svg" alt=""></h3><div class="mid"><h1 class="opening"><span class="we">WE'RE</span> COMİNG SOON</h1></div><div class="lower">Hello fellow shoppers! We're currenlty building our new fashion store.Add your email below to stay up-to-date with announcements and our launch deals</div><div class="form-con">sfddf<form class="form" action=""><label for="email" style="width: 80%; border: none;"><input type="email" class="email" name="email" placeholder="Email Address"></label><div class="flex-con"><div class="warning"><img class="error" src="images/icon-error.svg" alt=""><!-- --></div><button class="button"><img style="width: 1.2rem;" src="images/icon-arrow.svg" alt="Button Image"></button></div></form></div><div class="problem">The `input` field is empty asdasdasd asdasdas</div></div></div><div class="right"><img class="image" src="images/hero-desktop.jpg" alt=""></div></div></footer><script src="script.js"></script></body></html>