How not to wrap text on a new line after an image?

Question

css

The idea is this, there is a link block, there is an image-icon, a title and a text-description. Is it possible to place it as shown in the screenshot, preferably without neglecting the . Here is the code itself:position: absolute;

div#main_content {
    margin-top: 7%;
    margin-left: 10%;
    margin-right: 20%;
}

div.subblock {
    margin-top: 2%;
    margin-bottom: 2%;
}

div.downloadBlock {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    padding: 3%;
    transition: background-color 0.3s ease-out;
}
div.downloadBlock:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

img.icon {
    display: inline-block;
    width: 12%;
}

span.blockTitle {
    display: inline-block;
    font-family: "Raleway-Black";
    font-size: 22px;
}

a.block {
    display: inline-block;
    text-decoration: none;
    color: black;
}

<a class="block" href="https://8bgsg.ru/download?id=1">
    <div class="downloadBlock">
        <div>
            <img class="icon" src="icons/fb2.png">
                </div>
                    <div>
                        <span class="blockTitle">FB2</span>
                    </div>
                </div>
            </a>
        </div>
</a>

Answer 1

In general, I don’t understand what you messed up and why you need all this code, but I’ll answer the question. There are 2 ways not to transfer 2 daughters of the same parent to different rows. Give parent: 1) display: flex 2) white-space: nowrap .

Answer 2

flex? float? bootstrap col? no, have not heard...