JSFiddle - React, Tailwind, and code Playground

by shreevatsa

HTML

<div class="outer">
<div class="inner-images">
<div class="inner-image1">
This is the image 1.
</div>
<div class="inner-image2">
This is the image 2.
</div>
</div>
<div class="inner-notes">
This is what I think. I have a lot of text here. I want this text to wrap.
</div>
</div>

CSS

/* https://jsfiddle.net/op9srymy/ for inline-block */
.outer {
  width: 300px;
  border: 2px solid black;
  display: flex;
}

.inner-notes {
  flex: 60%;
  border: 2px solid blue;
}
.inner-images {
  flex: 40%;
  border: 2px solid red;
}

.inner-image1 {
  border: 2px solid yellow;
  height: 5em;
}
.inner-image2 {
  border: 2px solid yellow;
}