I have a div on my webpage that dynamically generates time and date content every half a second using the JavaScript function below:
function ClockAndCalendar() {
// Function logic here
}
var getTimeDateCalendar = setInterval(ClockAndCalendar, 500);
The generated time and date are displayed in another nested div with the id #date-and-time:
<div id="calDateTimeBox">
<i id="clock-link" class="fa fa-calendar" aria-hidden="true" data-title="Click to show calendar."></i>
<div id="date-and-time">Sample Content</div>
</div>The CSS for #calDateTimeBox and #clock-link is as follows:
#calDateTimeBox {
/* Styling rules for #calDateTimeBox */
}
#clock-link {
/* Additional styling rules for #clock-link */
}
In case the content overflows to a second line, I want the div layout to adjust automatically. The current design looks like this:
https://i.sstatic.net/hYI6I.png
But I would like it to look like this:
https://i.sstatic.net/sb2TA.png
Could this adjustment be achieved through jQuery? If so, how can I implement it?