My goal is to arrange the items in the container div evenly on a single line. I want them to be spaced out like this:
https://i.sstatic.net/kA2zj.png
I'm struggling to achieve this layout where the items are on the same line and evenly distributed within the available space.
This is what my current layout looks like:
https://i.sstatic.net/c6lZc.png
The first two pieces of text should align to the left, while the next two should roughly be centered. However, spacing between each item should also be consistent. I have tried using justify-content: space-between but it's not working for me.
This is the code I have so far:
<template>
<div class="container">
<div class="wrap-text">
<span class="function-text-bold">{{ functionBold }}</span>
<span class="function-text">{{ functionDescription }}</span>
</div>
<div class="wrap-text">
<span class="amount-text">Aantal toegelaten studenten per sessie</span>
<div class="click-amount">
<button><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-12v-2h12v2z"/></svg></button>
<span class="function-text">{{ amountPerSession }}</span>
<button><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h-2v5h5v2z"/></svg></button>
</div>
</div>
<button>Stel je tijdslot in</button>
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</template>
<script>
export default {
name: "CompanyJobOfferList",
data() {
return {};
},
props: {
functionBold: {
type: String,
required: true,
},
functionDescription: {
type: String,
required: true,
},
amountPerSession: {
type: String,
required: false,
},
},
};
</script>
<style scoped>
.container {
display: flex;
justify-content: space-between;
width: 100vw;
margin: 0 auto;
}
.wrap-text {
display: flex;
flex-direction: column;
height: 70px;
justify-content: space-evenly;
}
.click-amount {
vertical-align: middle;
display: flex;
}
.click-amount button{
border: none;
width: 25px;
height: 25px;
margin: 0px 10px;
}
button {
border: 2px solid var(--accent-color);
}
</style>