Version:

Install ​

npm i @vaadin/master-detail-layout

Import ​

javascript
import '@vaadin/master-detail-layout';

Variants ​

Flexible master, fixed detail ​

html
 <vaadin-master-detail-layout id="masterDetail" master-size="500px" detail-size="400px" expand-master>
        <div class="block master1">
          <h4>Master Area (flexible)</h4>
          <p>Minimum size: 500px</p>
          <p>Grows/shrinks depending on available space</p>
          <vaadin-button id="openButton" @click="openDetail1">Open Detail</vaadin-button>
        </div>
     <div slot="detail" class="block detail1" v-if="showDetail1">
          <vaadin-button theme="icon tertiary" class="close-button" @click="closeDetail1">
            <span theme="icon">close</span>
          </vaadin-button>
          <h4>Detail Area (fixed)</h4>
          <p>Fixed size: 400px</p>
          <p>Always remains the same width</p>
        </div>
  </vaadin-master-detail-layout>
javascript
const openButton = document.querySelector('#openButton');
openButton.addEventListener('click', e => );