Set panel width

Question

I'm trying to set a panel width, I'm using the "two columns stacked" layout, but I want that one column is 2/3 width and the other 1/3. Is 50% by default.

By default looks like this:

If I put this in my theme css:

.panel-2col-stacked > .panel-panel > .block-region-left {
    width: 66%;
}
.panel-2col-stacked > .panel-panel > .block-region-right {
    width: 34%;
}

I looks like

What I have to achieve that the panels take all the space available as in the first screenshot ?

I'm using a bootstrap subtheme with fluid container enabled (I don't know if this is important)

Answer 1

Sorry, the CSS code is wrong. I have made it work with.

.panel-2col-stacked > .panel-panel:nth-child(2) {
     flex: 0 1 65%;
}
.panel-2col-stacked > .panel-panel:nth-child(3) {
     flex: 0 1 34%;
}

But, I finally I dicided to create my own layout.

I created my mytheme.layouts.yml

  two_column_66_34:
  label: Two Column 66/34
  category: La Liga News
  path: layouts/twocol_66_34
  template: twocol_66_34
  css: twocol_66_34.css
  regions:
    top:
      label: Top
    left:
      label: Left side
    right:
      label: Right side

then I created in the layouts/twocol_66_34 directory

the twig template, named twocol_66_34.html.twig

  <div class="panel-2col_66_34" {% if css_id %}{{ css_id }}{% endif %}>
  <div class="panel-panel panel-full-width">
    {{ content.top }}
  </div>

  <div class="panel-panel panel-col-left">
    {{ content.left }}
  </div>

  <div class="panel-panel panel-col-right">
    {{ content.right }}
  </div>
</div>

and its CSS (also in layouts/twocol_66_34) named twocol_66_34.css

.panel-2col_66_34 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.panel-2col_66_34 > .panel-col-left {
  flex: 0 1 65%;
}

.panel-2col_66_34 > .panel-col-right {
  flex: 0 1 34%;
}

.panel-2col_66_34 > .panel-full-width {
  flex: 0 1 100%;
}

More info at How to register layouts with Layout Plugin