I am using PrimeNG in my application and have installed all the required dependencies as per the official documentation. I am trying the example of the grid system available on their website and it's not working.

Here's the code:

<div class="p-grid">
    <div class="p-col">1</div>
    <div class="p-col">2</div>
    <div class="p-col">3</div>
</div>

Here are styles in my angular.json file

"styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/primeicons/primeicons.css",
          "./node_modules/primeng/resources/themes/nova/theme.css",
          "./node_modules/primeng/resources/primeng.min.css",
          "./node_modules/primeflex/primeflex.css",
          "apps/customer-application/src/styles.scss"
        ]

It's printing all these three lines vertically (in a single column) but, as per the documentation it should print it in a single line i.e, horizontally (in 3 different columns). I am using Angular 12+ and running my app over Nx CLI. Any help would be appreciated!Thanks