<!DOCTYPE html>
<html lang="en">
  <head>
        <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

        .container {
            background-color: #2f2f2f;
            color: #ffffff;
            font-family: 'Inter', sans-serif;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 50px;
            width: 100%;
            min-height: 300px;  /* Set a minimum height that fits your needs */
        }

        .item {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item" id="item1">The Editor's Loft</div>
        <div class="item" id="item2">päätoimittajan vintti</div>
        <div class="item" id="item3">Η σοφίτα του συντάκτη</div>
        <div class="item" id="item4">エディターズロフト</div>
        <div class="item" id="item5">에디터의 작업실</div>
        <div class="item" id="item6">Redaktørens loft</div>
        <div class="item" id="item7">Das Loft der Redaktion</div>
        <div class="item" id="item8">Le grenier de l'éditeur</div>
        <div class="item" id="item9">Il loft dell'editore</div>
        <div class="item" id="item10">O loft do editor</div>
    </div>

    <script>
        window.onload = function() {
            for (let i = 1; i <= 10; i++) {
                let randomMargin = Math.floor(Math.random() * (50 - 10 + 1)) + 10;
                document.getElementById('item' + i).style.marginLeft = randomMargin + '%';
            }
        }
    </script>
  </head>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.