Flexbox unrelated grandchildren

Here's an example of what I am trying to accomplish.

Basically, I need a DOM structure:

<div class="parent">
  <div class="child">
    <div class="grandchild flex-3">
      Wide Grandchild
    </div>
    <div class="grandchild flex-1">
      Narrow Grandchild
    </div>
  </div>
  <div class="child">
    <div class="grandchild flex-2">
      Medium Grandchild
    </div>
  </div>
</div>

      

        
        
        
      

    

But I want the flexibility properties of my grandchildren to be reflected as if they were siblings.

Here's the CSS I have:

.parent {
  display: flex;
}

.grandchild {
  background-color: rebeccapurple;
  color: #ddd;
  padding: 6px;
  border: solid 2px #ddd;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

      

        
        
        
      

    

I want it to look like this:

However, it looks like this: