JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="main2.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<main>
    <div class="content-wrapper">
        <div class="co_event_form">
            <h4>Veranstaltung hinzufügen</h4>
            <form>
                <fieldset>
                        <input class="input_medium" placeholder="Name" type="text" name="event_name">
                        <input class="input_medium" type="text" placeholder="URL" name="event_link">
                </fieldset>
                <fieldset>
                        <textarea placeholder="Beschreibung" name="event_description"></textarea>
                </fieldset>
                <fieldset class="left">
                        <input class="input_medium" placeholder="31-12-2019 15:23" type="text" name="event_date">
                        <select class="input_small" name="event_location">
                            <option value="Berlin">Berlin</option>
                            <option value="Charlottenburg">Charlottenburg</option>
                            <option value="Friedrichshain">Friedrichshain</option>
                            <option value="Köpenick">Köpenick</option>
                            <option value="Lichtenberg">Lichtenberg</option>
                            <option value="Marzahn">Marzahn</option>
                            <option value="Mitte">Mitte</option>
                            <option value="Neukölln">Neukölln</option>
                            <option value="Pankow">Pankow</option>
                            <option value="Reinickendorf">Reinickendorf</option>
                            <option value="Spandau">Spandau</option>
                            <option value="Steglitz">Steglitz</option>
                            <option value="Tempelhof">Tempelhof</option>
                            <option value="Treptow">Treptow</option>
...

CSS

* {
    font-family: "Montserrat", serif;
}

body {
    margin: 0;
}

main {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.content-wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

fieldset {
    border: none;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 0;
    padding-top: 0;
}

input[type=text], select {
    padding: 12px 20px;
    margin: 0;
    display: inline-block;
    border: 1px solid #349ebd;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    width: 100%;
    border: 1px solid #349ebd;
    resize: vertical;
    padding-left: 4px;
    padding-top: 4px;
    margin-bottom: 7px;
}

.input_medium {
    margin-bottom: 7px !important;
}

@media all and (min-width: calc(420px / 80 * 100 / 90 * 100 + 1px)) {
    fieldset {
        justify-content: space-between;
    }

    .input_medium {
        width: 48%;
        min-width: 200px;
    }

    .input_small {
        width: 23%;
        min-width: 100px;
    }
}

@media all and (max-width: calc(420px / 80 * 100 / 90 * 100)) {
    fieldset {
        justify-content: left;
    }

    .input_medium {
        width: 100%;
    }

    .input_small {
        width: 33%;
        margin-right: 10px;
    }
}