I am trying to have a page of aligned labels and descriptions where there is a single image on top of the page,
here is what is happening currently...
![What is happening](https://i.stack.imgur.com/0De16.png)
here is what I want to happen (I used the above image as the 'image' in this... I hope that is not confusing.
![enter image description here](https://i.stack.imgur.com/9htH3.png)
Is it possible for me to wrap multiple divs with text in them around this image while maintaining vertical alignment of the names to their value? I am a little rusty in my CSS but I am not sure this can be done (at least not in the way I set it up here)
.content-col {
display: inline-block;
vertical-align: top;
padding: 2px 2px 2px;
}
.content-key {
width: 30%;
font-weight: bold;
}
.content-value {
width: 65%;
}
hr{
margin-left: 10px;
margin-right: 10px;
}
.imageDiv{
background-color: pink;
width: 200px;
height: 200px;
object-fit: contain;
float: right;
margin-left: 5px;
}
<div class="imageDiv" ></div>
<div style="width: 100%;">
<div class="content-col content-key">Attribute Name Test</div>
<div class="content-col content-value">
This is where the attribute value and description will be.
This is where the attribute value and description will be.
This is where the attribute value and description will be.
This is where the attribute value and description will be.
This is where the attribute value and description will be.
</div>
</div>
<hr />
<div style="width: 100%;">
<div class="content-col content-key">Attribute Name Test</div>
<div class="content-col content-value">
This is where the attribute value and description will be.
This is where the attribute value and description will be.
This is where the attribute value and description will be.
This is where the attribute value and description will be.
This is where the attribute value and description will be.
</div>
</div>
<hr />
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…