How to resize vs-popup in the context of vuejs - vue.js

Question

Im using vs-popup in order to display the contents when ever the button is clicked, but the size of vs-popup is fixed, and my contents looks clumsy, so I want someone to tell me how I can change width of the popup as per my requirement.
<vs-button class="btn" #click=" showModal=true" color="#7367F0" > Click me</vs-button>
<vs-popup class="helundo" title="How will i resize popup" :active.sync="showModal">
<div class="vx-row">
<div class="vx-col w-full md:w-1/2 mb-base">
<p> I want this content in the left</p>
</div>
<div class="vx-col w-full md:w-1/2 mb-base">
<p> I want this content in the right</p>
</div>
</div>
</vs-popup>
<script>
export default {
data () {
return {
showModal: false
}
}
}
</script>
<style>
<!-- what should I add in order to resize the popup -->
</style>
And the output I'm obtaining is sent below:
I want the popup bigger and it should be flexible such that what ever content I add must fit accordingly.
Please do help me, as I am unable to change the width of the popup, what ever I do it is same, but if I add too many contents the width increases for a extend and it becomes scrollable.

Answer 1

I found out the answer myself, i am posting so that it can help others. If you are using vuesax library you might find out _fixesVuesax.scss
so just place this code there:
.con-vs-popup {
z-index: 53000;
.vs-popup {
width: 200px !important; //You can change the width according to your content
height: auto;
}
.vs-popup--content {
width: auto !important;
padding: 1rem;
font-size: 1rem;
}
}