How to Set Up This Two-Image <div> Without Elements Stacking?-CodePudding

I was tasked with building a relatively simple module for a new client test experience, but I feel like I can optimize the code. Important: I do not have access to the client's site, I am just supposed to build this module using HTML and CSS manipulation.

Currently, the relevant page contains a card image with some text underneath. I must introduce a new image of a badge which is meant to sit right to the left of the card. Here's what it is meant to look like:

This is the code block I currently have set up for that particular configuration:

.Card_Badge {
  box-sizing: border-box;
  max-height: 350px;
  overflow: hidden;
}

<div >
  <img alt="Badge Background" src="https://via.placeholder.com/100" style="max-width: 100px;max-height: 146px;display: flex;z-index: 1;">
  <img alt="Secured Card" src="https://via.placeholder.com/100" style="transform: translate(65px,-150px);">
</div>

Without the transform: translate() the images simple stack onto one another. There has to be a better way to accomplish the desired effect of the images being right next to one another without manipulating the positioning so excessively, right? Maybe with some kind of position: or display: component, but I admit that I am still not incredibly well-versed with how those work.

Any help would be greatly appreciated.

UPDATE: Here is the adjusted code that I have. The only issue I'm still having is that the shadow underneath the card element gets clipped to the right of one of the <div> containers. Not sure how to get around that.

CodePudding user response：

i think you should add <div ></div> to have more control on images in your model don't leave them without any element to control them. check the code below

.Card_Badge {
  box-sizing: border-box;
  max-height: 350px;
  overflow: hidden;
}
.image-container{
display:flex;
}

<div >
 <div >
  <img alt="Badge Background" src="https://via.placeholder.com/100" style="max-width: 100px;max-height: 146px;display: flex;z-index: 1;">
  <img alt="Secured Card" src="https://via.placeholder.com/100" ">
  </div>
</div>

CodePudding user response：

here this should work fine, use the gap property to set how far apart you want the elements to be.

    .Card_Badge {
    box-sizing: border-box;
    max-height: 350px;
    overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  gap: 5em;
}