I want to change css flex variable based on variable number

[IMckell]

So I'm making a module, in that module I have an image and some text that are side by side using flexbox. I want people to be able to manipulate a module variable "center" to control the flex property between the two items. This is my code.

<style>
* {
box-sizing: border-box;
}

.module-container3{
margin: 5px;
max-width: 100%;
}

.module-container3 .side-by-side{
display: flex;
flex-wrap: wrap;
}

.module-container3 .side-by-side .image{
flex: {{ module.center }};
margin: auto;
width: auto;
min-width: 100px;
}

.module-container3 .side-by-side .text{
flex: calc(100% - {{ module.center }});
padding: 0px 10px 15px 40px;
vertical-align: middle;
line-height: 1.5;
}

</style>

I put this code in the html file so that the hubl variables should work, but it's not. Any tips on how to set the flex property based on module variables?

[hgibson2]

Check this out I believe your answer lies in this article. - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties 

[hgibson2]

If that has not solved your issue here is another, https://famewide.com/