<div id="app"></div>

*{
  box-sizing: border-box;
}

body{
  background-color: rgba(0, 0, 0, 0.04);
}

input[type=radio] {
  position: absolute;
  visibility: hidden;

  +label > .item{
    background-color: #ffffff;
    margin: auto;
    width: calc(100% - 200px);
    transition: all .2s;
    box-shadow: 0 1px 4px 0 #0000001f;
    
    .header{
      height: 44px;
      padding: 4px 44px;
      display: flex;
      align-items: center;
      cursor: pointer;
      background-color: #ffffff;
    }
    
    .body{
      overflow: hidden;
      height: 0px;
      transition: all .2s;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .footer{
      display: none;
      height: 44px;
      padding: 4px 44px;
      align-items: center;
      border-top: 1px solid #c6c6c6;
      background-color: #ffffff;
    }
  }
  
  &:checked{
    +label > .item{
      width: calc(100% - 164px);
      margin: 6px auto;
      .header{
        border-bottom: 1px solid #c6c6c6;
        position: sticky;
        top: 0;
      }
      .body{
        height: 300px;
      }
      .footer{
        display: flex;
        position: sticky;
        bottom: 0;
      }
    }
  }
}

const Item = (props) => {
  const { id } = props;
  return (
    <>
      <input Type='radio' Name='item' Id={id} />
      <label For={id}>
        <div className='item'>
          <div className='header'>header</div>
          <div className='body'>body</div>
          <div className='footer'>footer</div>
        </div>
      </label>
    </>
  );
}

class List extends React.Component {
  constructor(props) { super(props); }
  render(){
    const items=[1,2,3,4,5,6,7,8,9,10]
    return(
      <div className='list'>
        { 
            items.map(i => <Item key={i} id={`i${i}`} />)
        }
      </div>
    )
  }
}

ReactDOM.render(<List />, document.getElementById('app'));