JSFiddle - React, Tailwind, and code Playground

by David McClelland

HTML

<div class="twPopoverDialog right modeless modal large language-pref-dialog"> twPopoverDialog
  <div class="arrow"></div>
  <div class="popoverDialogTitle-header modal-header">header</div>
  <div class="popoverDialog-content">popoverDialog-content
    <div class="modal-body">
      modal body
      <div class="language-prefs-body">
        <div class="language-prefs-available">available</div>
        <div class="language-prefs-gutter">gutter</div>
        <div class="language-prefs-current">current</div>
      </div>
    </div>
  </div>
  <div class="popoverDialog-footer">footer</div>
</div>

CSS

.twPopoverDialog {
  display: flex;
  flex-flow: column wrap;
  width: 90%;
  height: 90%;
  align-content: stretch;
  justify-content: stretch;
}

.modal-header {
  flex: 0 1 auto;
  width: 100%;
}

.popoverDialog-content {
  width: 100%;
  flex: 1 1 auto;
}

.popoverDialog-footer {
  width: 100%;
  flex: 0 1 auto;
}

div {
  border: 1px solid gray;
  margin: auto;
}

.modal-body {
  display: flex;
  flex-flow: row wrap;
  align-content: stretch;
}

.language-prefs-body {
  display: flex;
  flex-flow: row wrap;
  flex: 1 1 auto;
  width: 100%;
  min-height: 400px;
}