QR Code Component using CSS Flexbox

You can do something like this

HTML:

<div class="card">
<img src="./images/image-qr-code.png" alt="qr code" class="card__img" />

<div class="card__content">
</div>
</div>

CSS:

img {
display: block;
max-width: 100%;
}

.card {
width: min(335px, 100% - 2rem);
background-color: hsl(0deg, 0%, 100%);
padding: 1rem;
border-radius: 1rem;
}
.card__img {
width: 100% /* Optional, if width of img is less than width of card */
border-radius: 10px;
}