JSFiddle - React, Tailwind, and code Playground

by Alexey Mishin

HTML

<blockquote id="1">
  <div class="joke">
     <p>
      Q: How many programmers does it take to screw in a light bulb?<br>
      A: None. It's a hardware problem.
    </p>
   (by <a href="mailto:&#10;  [email protected]">
  Mishin Alex</a>  on 
 </div>
 <div class="control">
   <form action="/joke/delete" method="post">
    <input type="hidden" name="id" value="1">
    <input type="submit" value="Delete">
  </form>
 </div>
 <div class="control">
   <a class="edit" href="/joke/edit?id=1">
    Edit
  </a> 
 </div>
</blockquote>
<blockquote id="1">
  <div class="joke">
     <p>
      A programmer puts two glasses on his bedside table before going to sleep. A full one, in case he gets thirsty, and an empty one, in case he doesn’t.
    </p>
   (by <a href="mailto:&#10;  [email protected]">
  Mishin Alex</a>  on 
 </div>
 <div class="control">
   <form action="/joke/delete" method="post">
    <input type="hidden" name="id" value="1">
    <input type="submit" value="Delete">
  </form>
 </div>
</blockquote>
<blockquote id="1">
  <div class="joke">
     <p>
      A programmer puts two glasses on his bedside table before going to sleep. A full one, in case he gets thirsty, and an empty one, in case he doesn’t.
    </p>
   (by <a href="mailto:&#10;  [email protected]">
  Mishin Alex</a>  on 
 </div>
</blockquote>
<blockquote id="1">
  <div class="joke">
     <p>
      A programmer puts two glasses on his bedside table before going to sleep. A full one, in case he gets thirsty, and an empty one, in case he doesn’t.
    </p>
   (by <a href="mailto:&#10;  [email protected]">
  Mishin Alex</a>  on 
 </div>
 <div class="control">
   <a class="edit" href="/joke/edit?id=1">
    Edit
  </a> 
 </div>
</blockquote>

CSS

blockquote {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

p {
  margin: 0;
  padding: 0;
}

.joke {
  width: 70%;
  flex-grow: 1;
}

.control {
  width: 30%;
  margin-left: auto;
}