<template>
<div class="container">
<div class="left-column">
</div>
<div class="right-column">
</div>
</div>
</template>
<style>
.container {
display: flex;
}
.left-column {
flex: 1;
}
.right-column {
flex: 1;
}
</style>
<template>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</template>
<style>
.container {
display: flex;
align-items: stretch;
}
.item {
flex: 1;
}
</style>
<template>
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
</template>
<style>
.container {
display: flex;
justify-content: space-between;
}
.card {
flex: 1;
margin: 0 10px;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
</style>
