CSS Flex dynamic horizontal width based on nested element width - html

Question

I'm trying to create the following layout using CSS Flex. It seems simple but there's a tricky part to it which I will explain below.
HTML:
<div class="flex">
<div class="icon-col">
<div class="icon" style="max-width:120px;">
<svg>image code here...</svg>
</div>
</div>
<div class="text-col">
<h4>Awesome Design</h4>
<p>Nullam vel sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur blandit mollis lacus. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.</p>
</div>
</div>
CSS:
.flex {
display: flex;
flex-direction: row;
}
.icon-col, .text-col {
flex: 1;
}
.icon {
width: 100%;
}
Codepen preview: https://codepen.io/anon/pen/KEjJeO
As you can see in the preview, there is too much space between the icon and the text. The icon has to be 120px as specified in the inline CSS and the width of the text column should grow or shrink based on the icon size.
Try tricky part:
The icon has a dynamic width.
I can define a width for the icon using only an inline style in the HTML, in the .icon element as seen above in the HTML.
I have no control over the .icon-col element as far as adding a dynamic width to it. It would have been easy if I could just add the width to .icon-col.
I also can't add a width to .text-col because it has to resize automatically based on the icon size.
How can .icon-col be the same width as its child element .icon and have the text column resize automatically?

Answer 1

You can group and move things around but its just to get an idea.
.flex2 {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
background-color: blue;
}
.icon-col {
flex: 1 1 20%;
background-color: #ff0000;
position: relative;
padding: 20px;
}
.abacadabra {
width: 120px;
max-width: 120px;
position: relative;
float: right;
right: 5px
}
.text-col {
flex: 1 1 80%;
background-color: #ffff00;
padding: 20px
}
<div class="flex2">
<div class="icon-col">
<div class="abacadabra">
<svg aria-hidden="true" data-prefix="fas" data-icon="tools" class="svg-inline--fa ugbfa-tools fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6.9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7zM64 472c-13.2 0-24-10.8-24-24 0-13.3 10.7-24 24-24s24 10.7 24 24c0 13.2-10.7 24-24 24z"></path></svg>
</div>
</div>
<div class="text-col">
<h4>Awesome Design</h4>
<p>Nullam vel sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur blandit mollis lacus. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.</p>
</div>
</div>