cart preview – option rows misaligned

VPC products do not nicely render in the cart preview (dropdown shown when hovering over the cart in a woocommerce shop).

In my specific case the text in rows for individual options is misaligned. I’m using flatsome template and the default VPC skin, but this issue does not appear to be related to the template.

Divs used to render the table for displaying vpc options in the cart preview are set to 32px height

.vpc-cart-options-container .vpc-cart-options {
line-height: 32px;
padding: 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

the options icon is shown in a separate div via an img tag. The img is restricted to max 22px in height and width. But the 5px top and bottom margin on the image together with the 5px top and bottom padding of the surrounding div exceed the allotted 32px and destroys the layout. The two conflicting styles are defined in two separate css files.

.vpc-cart-options-container .vpc-cart-options > div img {
max-height: 22px;
max-width: 22px;
display: inline-block;
vertical-align: top;
border-radius: 2px;
box-shadow: 0 0px 2px rgba(0,0,0,.25);
}

vpc-default-skin.css: .vpc-cart-config img {
border: 1px solid #c8c8c8;
margin: 5px;
display: inline-block;
vertical-align: middle;
max-width: 30px;
max-height: 30px;
}

vpc-public.css: .vpc-cart-options-container .vpc-cart-options > div > div {
display: inline-block;
padding: 5px 10px;
width: 50%;
line-height: 22px;
border-right: 1px solid #e8e8e8;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}