* { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .gaugeGroup { width: 70vw; height: 20vh; display: flex; flex-direction: column; /* Keep as column */ justify-content: flex-start; background-color: #333; color: #fff; padding: 10px; border-radius: 50px; border: 2px solid #333; } .groupTitle { width: 100%; text-align: center; font-size: 24px; } .Node { display: flex; justify-content: space-around; align-items: center; width: 100%; height: 100%; } .Sensorvalues { display: flex; flex-direction: column; align-items: center; justify-content: space-around; flex-wrap: wrap; width: 20%; height: 100%; background-color: #ddd; color: #333; padding: 10px; margin: 5px; border-radius: 10px; text-align: center; position: relative; padding-bottom: 50px; /* Increase bottom padding */ } .gaugeContainer { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 80%; /* Increase the height from 70% to 80% */ position: relative; overflow: visible; } .gaugeImage { width: 100%; height: auto; max-height: 100%; object-fit: contain; position: absolute; /* Make the image position absolute */ top: 0; left: 0; z-index: 1; /* Make the image display below the needle */ } .gaugeValue, .gaugeText { width: 100%; text-align: center; font-size: 24px; z-index: 2; } .gaugeText { width: 100%; text-align: center; font-size: 24px; z-index: 2; position: absolute; bottom: -30px; /* Adjust this value to move the text further down */ } .valueContainer { display: flex; justify-content: center; margin-top: 10px; } #valueText { font-size: 20px; } .needle { position: absolute; margin-bottom: 2%; /* Lower the needle to the bottom */ left: 50%; width: 2px; height: 70%; background-color: black; transform-origin: bottom; z-index: 3; /* Make the needle display above the image */ } .contentContainer { display: flex; flex-direction: row; /* Layout children side by side */ width: 100%; height: 100%; }