JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<!DOCTYPE HTML>
    <html>

    <head>
      <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
      <meta charset="utf-8">
      <link rel="stylesheet" href="meinestyles.css">
      <style>
      
    </style>
    </head>

    <body>
      <div id="mywrapper">
        <header>
          <h1>Happy Birthday - Schriftzug</h1></header>
        <main>
          <section class="flex zwei_kasten">
    
          
          
            <article class="descripe col-66 ">
              <h3>Happy Birthday - Schriftzug aus Folienballons 40 cm</h3>
<ul style="list-style-position: inside;">
        <p> <p>Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?</p>
<p>Dann sind diese tollen Luftballons genau die richtigen f&uuml;r Sie.&nbsp;</p>
<p>&nbsp;</p>
<p>Die Ballons lassen sich mit Luft bef&uuml;llen und dank des eingebauten selbstverschlie&szlig;enden Ventils, ist ein nach- und wiederauff&uuml;llen mehrmals m&ouml;glich.</p>
<p>&nbsp;</p>
<p>Die Luft bleibt nach dem Auff&uuml;llen etwa&nbsp;<strong>5-7 Tagen</strong> im Ballon, was einen langen Spa&szlig; erm&ouml;glicht.</p>
<p>&nbsp;</p>
<p style="font-weight: 400;">Au&szlig;erdem befinden sich an jedem Ballon mehrere Aufh&auml;nglaschen, sodass sich der Schriftzug perfekt an einer Schnur aufh&auml;ngen l&auml;sst.&nbsp;</p>
<p style="font-weight: 400;">&nbsp;</p>
<h3><strong>Technische Daten:</strong></h3>
<ul>
<li>13 Teiliges Set</li>
<li>Gr&ouml;&szlig;e: ca. 40 cm (pro Ballon)</li>
<li>Farbe: siehe Bild</li>
<li>mehrere Haltevorrichtungen an jedem Buchstaben</li>
<li>Material: Folie</li>
<li>Integriertes Automatikschlie&szlig;ventil (nur Aufblasen - kein Knoten notwendig)</li>
<li>Wiederverwendbar durch leichtes Ablassen der Luft ( mit einem Strohhalm)</li>
<li>Anlass: Hochzeit, Geburtstag, Party, Silvester, Geschenk, uvm.&nbsp;</li>
<li>Bef&uuml;llbar nur mit Luft (die Ballons...

CSS

#mywrapper main * {
        margin: 0;
        padding: 0;
      }
 #mywrapper main , header , footer { width:100%; margin:0px  auto; padding:10px; font-family: 'Poiret One'; line-height:20px;  letter-spacing:1px; box-sizing:border-box;}     
      #mywrapper main,
      header,
      footer {
        margin: 0px auto;
        padding: 10px;
        font-family: 'Tahoma';
        line-height: 20px;
        letter-spacing: 1px;
        box-sizing: border-box;
      } 
      
      #mywrapper main {
        background:white;
      }
      
      #mywrapper header {
        background:white;
        color: Black;
        padding: 1em;

        font-weight: bold;
        text-align: center;
        border:0px solid grey;
      }
        
      #mywrapper section {
        padding: 10px 0;
        text-align: center;
      }
      hr{
        height:20px;
        width:100%;
        background:none;
      }

      #mywrapper article {
         margin: 0.5rem;
        
         flex-shrink: 0;
         flex-basis:49%;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;

        
        
        text-align: center;
        background: lightgrey;
        padding: 2px;
        margin-right: 10px;
        width:50%;
        font-weight: 400;
      }
      
      #mywrapper article h1 {
        font-size: 2vw;
        border: 1px solid grey;
        
      }
      

      #mywrapper article a {
        color: #8B4513;
        font-weight: bold;
      }
      
      #mywrapper .descripe h3 {
        padding: 10px;
        font-weight: bold;
        font-size: 1.2em;
      }
      
      #mywrapper h3 {
        padding: 10px;
        font-weight: bold;
        font-size: 1.8em;
        line-height: 2.0;
      }
      
      #mywrapper p {
        padding: 10px;
      }
      
      #mywrapper footer{
        padding: 10px;
        background: transparent;
        text-align: right;
        color: black;}
      
      #mywrapper footer a {
     ...

JavaScript

.zwei_kasten{
  width:49%;
                  display: flex;
                flex-direction: column;
                }