Text position in table-style DIV when there's a picture? - html

Question

I have this table-style DIV code for a used vehicle sales platform:
.mainwrapper {
border: 2px solid;
display: table;
}
.itemwrapper {
display: table-row;
width: 706px;
}
.mainwrapper {
margin-bottom: 20px;
}
.item {
width: 700px;
border: 1px solid;
padding: 1em;
background-color: blue;
color: white;
}
.item:nth-child(2) {
float: left;
margin: -2px;
}
.item1 {
display: table-cell;
text-align: left;
margin-left: -30px;
}
.item1 p {
margin-top: -30px;
}
.item-price {
width: 300px;
background-color: blue;
padding: 1em;
color: white;
text-align: center;
}
.picture, .item {
display: table-cell;
border: 1px solid;
}
.picture {
width: 90px;
margin: 1px;
border: 2px solid;
}
.picture img {
height: 185px;
}
<div class="mainwrapper">
<div class="itemwrapper">
<div class="item">1992 ELDDIS PAMPEROS XLi</div>
<div class="item-price">£1,000</div>
</div>
<div class="itemwrapper">
<div class="picture"><img src="https://complianz.io/wp-content/uploads/2019/03/placeholder-300x202.jpg.webp"></div>
<div class="item1"><p>2 berth, good condition</p></div>
</div>
</div>
<div class="mainwrapper">
<div class="itemwrapper">
<div class="item">2008 SWIFT CHALLENGER 540</div>
<div class="item-price">£13,000</div>
</div>
<div class="itemwrapper">
<div class="picture"><img src="https://complianz.io/wp-content/uploads/2019/03/placeholder-300x202.jpg.webp"></div>
<div class="item1"><p>4 berth end bedroom</p></div>
</div>
</div>
What I am trying to do is ensure the class item1 is opposite the image, with the text like this if you didn't have the £ per month div and list as table:
Basically, what I am trying to fix is the text that's in class item1 opposite the image (not with all the description or colored DIV there); see the image below.
I tried margin-left and margin-top, but it won't quite put the image opposite.
This is the result of my code:
I can't quite get it to work as I'd expected, text opposite image and size of DIV in the CSS; if anyone can help, I'd much welcome this.
It works OK - no major coding errors, but isn't quite esthetically working out, and that's the basic problem.
I'm trying this as basic HTML first before attempting anything with Javascript, just to ensure it works as a standalone design.
Edit: I tried vertical-align for text, that worked, but it's fixing the gap between image div and text that's the issue. There's a large amount of space I don't know how to fix.

Answer 1

As the answer for the text is solved. You can change the column width by changing the css property of item. you can do it as follows. The width was 700px in your code you can reduce to get a smaller width. I changed it to 400px.
.item {
width: 400px;
border: 1px solid;
padding: 1em;
background-color: blue;
color: white;
}