JSFiddle - React, Tailwind, and code Playground

HTML

<flexlayout>
<item>
    <headline>Headline 1. Click me!</headline>
    <story>Story 1 starts here</story>
 </item>
<box>I move but my size and content are fixed.</box>
<item>
    <headline>Headline 2. Click me!</headline>
    <story>Story 2 starts here</story>    
</item>
<item>
    <headline>Headline 3. Click me!</headline>
    <story>Story 3 starts here</story>
 </item>
<item>
     <headline>Headline 4. Click me!</headline>
    <story>Story 4 starts here</story>   
</item>
<box id="colorChanger">I move and my size is fixed, but my content is not.</box>
<item>
    <headline>Headline 5. Click me!</headline>
    <story>Story 5 starts here</story>
</item>
<item>
    <headline>Headline 6. Click me!</headline>
    <story>Story 6 starts here</story>
</item>
<item>
    <headline>Headline 7. Click me!</headline>
    <story>Story 7 starts here</story>
</item>
<item>
     <headline>Headline 8. Click me!</headline>
    <story>Story 8 starts here</story>
</item>
<item>
    <headline>Headline 9. Click me!</headline>
    <story>Story 9 starts here</story>
</item>
<item>
    <headline>Headline 10. Click me!</headline>
    <story>Story 10 starts here</story>
</item>
</flexlayout>

CSS

flexlayout {
	display: flex;
    flex-direction: column;
    height: 600px;
}

item {
    display: block;
    border: 1px solid black;
    flex-grow: 1; 
}

item {
    background-color: lightblue;
    height: 50px;
    transition: height 2s;
}

box {
    position: relative;
    flex: none;
    height: 100px;
    background-color: lightgreen;
    border: 1px solid black;
}

headline {
    display: block;
    font-weight: bold;
}

story {
    display: block;
}

JavaScript

function toggleHeight(event, i) {
   if (isExpanded[i]) {
     event.currentTarget.style.height = "50px";
     isExpanded[i] = false;
   } else {
     event.currentTarget.style.height = "200px";
     isExpanded[i] = true;
   }
}


var allItems = document.getElementsByTagName("item");
var isExpanded = new Array(allItems.length);

for (var i = 0; i < allItems.length; i++) {
  allItems[i].addEventListener("mousedown",
                               function(val) { 
                                   return function(event) {
                                       toggleHeight(event, val); };}(i));
  isExpanded[i] = false;
}