* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    flex-wrap: wrap; /* Allows for responsiveness */
}

.column {
    padding: 20px; /* Add some padding */
}

.left {
    flex: 0 0 30%; /* 30% width */
    background-color: #f0f0f0; /* Light gray for visibility */
}

.right {
    flex: 0 0 70%; /* 70% width */
    background-color: #c0c0ff; /* Light blue for visibility */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .left, .right {
        flex: 0 0 100%; /* Stack columns on small screens */
    }
}