How do you make a picture pop out of a div of elements-CodePudding

I made a flexed div that contains my name, ID and picture:

.version2 {
    background-color: lightblue;
    display: flex;
    justify-content: space-evenly;
}

.version2 div {
    padding: 5px 0 5px 0;
    align-self: center;
}

#propic{
    border-radius: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyHeader</title>
    <link rel="stylesheet" href="styles/stylesheet.css">
</head>
<body>
    <div class="version2">
        <div><strong>Name:</strong> Tahmin Ahmed </div>
        <div><strong>ID:</strong> 123456</div>
        <picture>
            <img id="propic" src="https://i.stack.imgur.com/av1Fi.png" alt="My Profile picture">
        </picture>
    </div>
</body>
</html>

I want the blue background to be only slightly larger than the text and the picture to overflow out of the blue background downwards. What do I have to add/remove to achieve this?
This is what I want it to look like

CodePudding user response：

Is this the desired effect you are looking for? I just added a fixed height to your outer .version2 container:

.version2 {
    background-color: lightblue;
    display: flex;
    justify-content: space-evenly;
    height: 2rem; /* added a fixed height */
}

.version2 div {
    padding: 5px 0 5px 0;
    align-self: center;
}

#propic{
    border-radius: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyHeader</title>
    <link rel="stylesheet" href="styles/stylesheet.css">
</head>
<body>
    <div class="version2">
        <div><strong>Name:</strong> Tahmin Ahmed </div>
        <div><strong>ID:</strong> 123456</div>
        <picture>
            <img id="propic" src="https://i.stack.imgur.com/av1Fi.png" alt="My Profile picture">
        </picture>
    </div>
</body>
</html>