How to stop my text from squishing my icon?-CodePudding

I'm trying to make a small window that pops up when you click a button on a webpage of mine. The window will look like this and display information about the button you just clicked. How can I stop the h2 from squishing the icon when the text gets too long?

Also while I'm asking, how can I get these two on the same row together in a nicer way than I have now? Different strings of text will position the h2 in different areas bring my icon with it. Thank you.

    .main {
        border: solid 2px #939388;
        border-radius: 10px;
        background-color: #0f0f3de8;
        box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
        margin-top: 20px;
        width: 400px;
        height: 300px;
    }
    
    .inner {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 20px;
    }
    
    h2 {
        color: white;
        text-align: center;
    }
    
    .icon {
        border: solid 1px #939388;
        border-radius: 10px;
        background-image: url(https://imgur.com/TIKOFh6.png);
        box-shadow: 0 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.425);
        height: 78px;
        width: 78px;
        margin-right: 20px;
        background-repeat: no-repeat;
    }

<body>
    <div >
        <div >
            <div ></div>
            <h2>This long string of text squishes my icon</h2>
        </div>
    </div>
</body>

CodePudding user response：

All you need is flex-shrink: 0;:

For the alignment, you can experiment with align-items on .inner - for instance align-items: center;

    .main {
        border: solid 2px #939388;
        border-radius: 10px;
        background-color: #0f0f3de8;
        box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
        margin-top: 20px;
        width: 400px;
        height: 300px;
    }
    
    .inner {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 20px;
        align-items: center;
    }
    
    h2 {
        color: white;
        text-align: center;
    }
    
    .icon {
        border: solid 1px #939388;
        border-radius: 10px;
        background-image: url(https://imgur.com/TIKOFh6.png);
        box-shadow: 0 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.425);
        height: 78px;
        width: 78px;
        margin-right: 20px;
        background-repeat: no-repeat;
        flex-shrink: 0;
    }

<body>
    <div >
        <div >
            <div ></div>
            <h2>This long string of text <em>doesn't</em> squish my icon</h2>
        </div>
    </div>
</body>