title: justify-content is not applying in chakra ui
body: <p>I'm developing a Website using Next.js and Chakra-ui. Here I'm tring to align the ButtonGroup to the end. For that I'm trying to use <code>justifyContent=&quot;space-between&quot;</code> but itsnt working.
  Here is the code for the Card Components</p>
  <pre><code>            &lt;Flex direction=&quot;column&quot; px={0} justifyContent=&quot;space-between&quot;&gt;
                  &lt;Flex px={10} pt={10} direction=&quot;column&quot; lineHeight=&quot;7&quot; mb={5}&gt;
                      &lt;Heading size=&quot;sm&quot;&gt;{data.name}&lt;/Heading&gt;
                      &lt;UnorderedList mt={5}&gt;
                          {data.features.map((element, index) =&gt; (&lt;ListItem key={index} fontSize=&quot;13px&quot;&gt;{element}&lt;/ListItem&gt;))}
                      &lt;/UnorderedList&gt;
                  &lt;/Flex&gt;
                  &lt;ButtonGroup spacing=&quot;0&quot;&gt;
                      &lt;Button w=&quot;100%&quot; m={0} borderRadius=&quot;0 0 0 20px&quot; fontSize=&quot;14px&quot;&gt;
                          Explore More
                      &lt;/Button&gt;
                      &lt;Button
                          w=&quot;100%&quot;
                          color=&quot;white&quot;
                          bg=&quot;#274E85&quot;
                          m={0}
                          borderRadius=&quot;0 0 20px 0&quot;
                          fontSize=&quot;14px&quot;
                      &gt;
                          Apply Now
                      &lt;/Button&gt;
                  &lt;/ButtonGroup&gt;
  
              &lt;/Flex&gt;
  </code></pre>
  <p>Please Someone help me solve this
  <a href="https://i.stack.imgur.com/TliIe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TliIe.png" alt="enter image description here" /></a></p>