These two divs hug each other whenever I switch to mobile view. What would be the best way to preserve the space between these two divs, so that it looks identical to the desktop version when I switch to mobile? I'm hoping not to use media queries.
* { box-sizing: border-box; margin: 0; padding: 0; } body { height: 100vh; display: flex; align-items: center; justify-content: space-evenly; background-color: rgb(73,73,73); } .container { height: 60vh; width: 40vh; background-color: rgb(213, 213, 213); border-radius: 3vh; filter: drop-shadow(1vh 1.2vh 0.5vh rgb(38, 38, 38)) ; } .scoreboard { height: 20vh; width: 40vh; background-color: rgb(213, 213, 213); border-radius: 2vh; filter: drop-shadow(1vh 1.2vh 0.3vh rgb(38, 38, 38)) ; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./master.css"> <title>Document</title> </head> <body> <div class="container"></div> <div class="scoreboard"></div> </body> </html>
