I am currently working on aligning two parallel div boxes, each containing text. The width of these div boxes is not fixed and changes based on a percentage. My challenge is to make the text in the left div box start at the same position as a heading in the right box, but I am unsure how to vertically align them.
#left {
width: 19%;
height: auto;
margin-left: auto;
background-color: green;
float: left;
margin-left: 20%;
text-align: right;
padding-bottom: 20px;
padding-top: 10px;
}
#right {
float: left;
width: 38%;
height: auto;
background-color: blue;
margin-left: 1%;
text-align: left;
padding-bottom: 20px;
padding-left: 1%;
padding-right: 1%;
padding-top: 10px;
}<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="left">
<p>This text should align with the caption "here"</p>
<p>Involving images, this should align with the caption "here2"</p>
</div>
<div id="right">
<p>Example text example text example text example text example text. </p>
<h1>here</h1>
<p>Example text example text example text example text example text. </p>
<h1>here2</h1>
<p>Example text example text example text example text example text. </p>
</div>
</div>
</body>
</html>The desired end result should resemble this: Example 1
It should also accommodate images like this:
I am seeking guidance on achieving this layout or confirmation if it is not feasible. Any assistance would be greatly appreciated.