I have been struggling with this for a quite some time now, and i couldn't find a sufficient answer. Basically i have one parent component which html goes as follows:

```
<div class="container">
    <child-one></child-one>
    <child-two></child-two>
</div>

```

the problem is that the child-one component has its size set as auto, with some padding to look good,

```
child-one {
    width: auto;
    height: auto;
    padding: 0.5rem;
}

```

and child-two has a fixed width and height in it's own scss.

```
child-two {
    width: 10rem;
    height: auto;
 }

```

is there a way to somehow change the width of child-two in the parent without editing the child-two?

I was hoping for something along the lines of storing the width of the child-one, and setting the width of child-two to the same value.

```
child-one { 
    width:auto;
    padding: 0.5rem;
    $width: this.width !global //idk about this one
 }

child-two {
    width: $width
    padding: 0.5rem
 }

```

*please note that the child-one and child-two scss don't look this way in the code, and are normally written, this is just for the purpose of simplifying the question*