Responsive content with font-awsome and VueJs 3 - css

Question

I want to change the style of my component to fit the content,
My component Plan.vue:
<template>
<div class="plan">
<div id="planFlex">
<font-awesome-icon icon="fa-solid fa-user fa-xl" />
<font-awesome-icon icon="fa-solid fa-arrow-left fa-xl" />
<h1>Plan</h1>
<font-awesome-icon icon="fa-solid fa-arrow-right fa-xl" />
<font-awesome-icon icon="fa-solid fa-robot fa-xl" />
</div>
</div>
</template>
<script>
export default {
name: "Plan"
};
</script>
<style>
#import "../css/Plan.css";
</style>
my stylesheet Plan.css:
#planFlex {
display: flex;
justify-content: space-between;
padding: 5px;
}
.fa-user {
color: white;
}
.fa-robot {
color: white;
}
.fa-arrow-right {
color: white;
position: relative;
padding-left: 80px;
}
.fa-arrow-left {
color: white;
padding-right: 80px;
}
#planFlex h1 {
text-align: center;
margin: 0px;
color: antiquewhite;
}
#planFlex h1:hover {
cursor: pointer;
}
#planFlex h2 {
margin: 0px;
padding-left: 3%;
color: white;
}
I have tried to add flex-shrink: 1, and width: fit-content to my stylesheet, but it didn't work well with me, can you please tell me how can I make my design responsive? thanks in advance.

Answer 1

The problem is with .plan outer div which by default will display as block, making your #planFlex stretch to its borders.
If you add the following you should find that #planFlex will just be the width of your content:
.plan {
display: flex;
justify-content: center;
}
In your specific case, you should consider removing the 80px padding on your arrow icons and let flex do the spacing for you. Assuming you want the icons to stick to the sides and your title right in the middle, just wrapped them around in some div, that did the trick for me running your project:
<div id="planFlex">
<div>
<i class="fa-solid fa-user fa-xl"></i>
<i class="fa-solid fa-arrow-left fa-xl"></i>
</div>
<h1 #click="addPopUp(testPopup, `Lego not in the right place`)">Plan</h1>
<div>
<i class="fa-solid fa-arrow-right fa-xl"></i>
<i class="fa-solid fa-robot fa-xl"></i>
</div>
</div>