CSS Animation for hover rotate()

I have a row in my page and I want the space in between the borders of the boxes along with keeping the boxes the same size on rotate. The animation is what I want it's that they squares are turning into rectangles and also I don't seem to know how to make them look as stand alone squares with the borders?

.statementnews {
    border-style: solid;
    border-width: 1px;
    padding-left:2em;
    /* width: 3vw; */
    /* height: 3vh; */
    /* justify-content: space-between; */
    /* margin-right: 1em; */
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.statementnews p {
    text-align: wrap;
    margin-left:1em;
    margin-right:1em;
    background-color: #F0F0F0;
}
.statementnews:hover {
    width: 1em;
    height: 1em; 
    transform: rotate(360deg);
}
.mycolumn2 {
    /* display: table-cell; */
    margin-top: 2em;    
    /* width:100%; */
    text-align: wrap;
}

.mycolumn2 div {
    width:100%;
    display: table-cell;
    padding-top: 1em;
    width: 25vw;
    height: 3vh;
    justify-content: space-between;
}

<section class="row sectionthird">
            <h1 class="mycolumn_header">What they’ve said</h1>
                <div class="mycolumn2" id="content2">
                    <div class="statementnews" id="content2">
                        <img src="https://i.imgur.com/19iZKat.png" alt="">
                         <p>“Manage has supercharged our team’s workflow. The ability to maintain 
                          visibility on larger milestones at all times keeps everyone motivated.”</p>
                          <p>~Anisha Li</p>
                    </div>
                    <div class="statementnews" id="content2">
                        <img src="https://i.imgur.com/nywqgF7.png" alt="">
                        <p> “We have been able to cancel so many other subscriptions since using 
                          Manage. There is no more cross-channel confusion and everyone is much 
                          more focused.”</p>
                          <p>~Ali Bravo</p>
                    </div>
                    <div class="statementnews" id="content2">
                        <img src="https://i.imgur.com/TAe4vVN.png" alt="">
                        <p>“Manage allows us to provide structure and process. It keeps us organized 
                              and focused. I can’t stop recommending them to everyone I talk to!”</p>
                            <p>~Richard Watts</p>
                    </div>
                    <div class="statementnews" id="content2">
                        <img src="https://i.imgur.com/dnBxz07.png" alt="">
                          <p>“Their software allows us to track, manage and collaborate on our projects 
                          from anywhere. It keeps the whole team in-sync without being intrusive.”</p>
                          <p>~Shanai Gough</p>
                    </div>
                </div>
        </section>

Solution

This is the modified code which would give you the desired output:

html

<section class="row sectionthird">
  <h1 class="mycolumn_header">What they’ve said</h1>
  <div class="mycolumn2 " id="content2">
    <div class="statementnews col">
      <img src="https://i.imgur.com/19iZKat.png" alt="">
      <p>“Manage has supercharged our team’s workflow. The ability to maintain
        visibility on larger milestones at all times keeps everyone motivated.”</p>
      <p>~Anisha Li</p>
    </div>
    <div class="statementnews col">
      <img src="https://i.imgur.com/nywqgF7.png" alt="">
      <p> “We have been able to cancel so many other subscriptions since using
        Manage. There is no more cross-channel confusion and everyone is much
        more focused.”</p>
      <p>~Ali Bravo</p>
    </div>
    <div class="statementnews col">
      <img src="https://i.imgur.com/TAe4vVN.png" alt="">
      <p>“Manage allows us to provide structure and process. It keeps us organized
        and focused. I can’t stop recommending them to everyone I talk to!”</p>
      <p>~Richard Watts</p>
    </div>
    <div class="statementnews col">
      <img src="https://i.imgur.com/dnBxz07.png" alt="">
      <p>“Their software allows us to track, manage and collaborate on our projects
        from anywhere. It keeps the whole team in-sync without being intrusive.”</p>
      <p>~Shanai Gough</p>
    </div>
  </div>
</section>

and add this to your css

.col {
  min-width:25vw;
}

Also, there was one error. The id of all the div of statement news were the same. In HTML, ids can't be the same. So I have removed the ids out of divs if you wish to add them, give them different naming(content1, content, content3 and so on).