I'm new to learning VUE and I'm trying to create a page where two different colors connect on the left and right with the same height. However, I'm running into issues where the colors don't align unless I add content to the right side.
I've tried using relative positioning and floating elements left and right, but it hasn't worked as expected.
I'm looking for a solution that doesn't involve using gradient colors or pseudo-elements like ::before or ::after.
<template>
<div class="a">
<div class="b">
<div class="v1">
<img src="../assets/v.png"/>
</div>
<div class="v2">
<img src="../assets/v.png"/>
</div>
<div class="v3">
<img src="../assets/v.png"/>
</div>
<div class="v4">
<img src="../assets/v.png"/>
</div>
</div>
<div class="c">
<div class="v5">
<img src="../assets/v.png"/>
</div>
<div class="v6">
<img src="../assets/v.png"/>
</div>
</div>
</div>
</template>
<style>
.a{
margin: 0%;
/* background: linear-gradient(top, red ,red 50%,blue 50%,blue); */
}
.b{
float: left;
background-color: antiquewhite;
width: 30%;
height: 100%;
}
.c{
float: left;
background-color:red;
width: 70%;
height: 100%;
}
</style>