JSFiddle - React, Tailwind, and code Playground

by OjisanSeiuchi

HTML

<div class="flex-container">
  <div class="flex-child">
    This is information from the front side of the card. It will appear on the left side of the card.
    <br/>
    On an Anki template, you will have a {{field}} designator to hold the content.
  </div>
  <div class="flex-child">
    And this is information from the back side of the card and it will appear on the right side of the card.
    <br/>
    As in the left side block, on an Anki template, there will be one or more back side {{field}} tags here.
  </div>
</div>

CSS

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid silver;
}  

.flex-child:first-child {
    margin-right: 20px;
}