React panel is squashed in tab that is not directly loaded - React Equalizer

I am using React, Redux and Bootstrap setup. I am building book website that have different tabs in that tabs are items(books) that have the same id through the different tabs. All my data is stored in a store and passed down to panel like so: TabsContainer(here I filter the books and pass down via props)->[All, Favorites, ...]->List of Books (all the same for every one) -> Book (all the same).

It is hard to post all the code and also basic concepts since I don't have idea what could be wrong. I instead post the result.

This is where it is ok. I can also fix the bug by resizing the window, but then it bugges the other 4 tabs.

This is clearly a bug. Bugg happens always when I move aways from inital tab.

What could be wrong? Should I set different keys? But if I understand correctly the react would do necessary rendering.

Update Found the root of the evil is the react Equalizer that I used to match column sizes (bootstrap responsive) so that button row appeared on the bot. I believe that has to do with incompatibility with React. So the problem now is how to put button row on the bottom of the panel.

 <div className="col-md-12 col-lg-6">
                <div className="panel panel-default no-padding">
                    <div className="panel-body contentRow" style={book_item.mainContainer}>
                        <Equalizer>
                            <div className="col-xs-12 col-sm-6" style={book_item.imageContainer}>
                                <div>
                                    <FavoriteIcon reading={reading} style={book_item.favorites}
                                                  onFavoriteChanged={this.onFavoriteChanged}/>
                                    <Link to={"readings/"+reading.id+"/edit"} params={{id: reading.id}} style={book_item.imageLink}>
                                        <img
                                            src={'http://smartbooky.hopto.org/media/images/books/' + reading.book.id + '.jpg'}
                                            height="210px" style={book_item.bookImage}/>
                                    </Link>
                                </div>
                            </div>
                            <div className="col-xs-12 col-sm-6" style={book_item.textContainer}>
                                <div className="bookTitle">
                                    <strong>{reading.book.title}</strong><br/>
                                </div>
                                <div className="bookSubtitle">
                                    {(() => {
                                        if (reading.book.subtitle)
                                            return (<div><em>{reading.book.subtitle}</em> <br/></div>);
                                    })()}
                                </div>
                                <div className="bookAuthors">
                                    <div>{authors ? authors : "Unknown author"}<br/></div>
                                </div>
                                <div className="bookDescription hidden-xs" style={book_item.bookDescription}>
                                    {truncatedDescription.replace(/<\/?[^>]+(>|$)/g, "")}
                                </div>
                                <div className="bookTags hidden-xs row" style={book_item.bookTags}>
                                    {reading.book.genre ? BookCard.renderTags(reading.book.genre) : void(0)}
                                </div>
                                <div className="buttonRow"
                                     style={window.innerHeight > 400 ? book_item.buttonRow : void(0)}>
                                    <div className="col-xs-4">
                                        <Button icon="glyphicon glyphicon-remove" name="Remove" kind="primary"
                                                handleClick={this.onReadingDelete} style={book_item.buttonRemove} />
                                    </div>
                                    <div className="col-xs-4">
                                        <Button icon="glyphicon glyphicon-th-list" name="Shelf" kind="primary"/>
                                    </div>
                                    <div className="col-xs-4">
                                        <Button icon="glyphicon glyphicon-edit" name="Edit" kind="primary"/>
                                    </div>
                                </div>
                            </div>
                        </Equalizer>
                    </div>
                </div>
            </div>

Creator of react-equalizer here. It is possibly an issue with the equalization happening before the image is loaded. I just published a new verion that fixes this issue (1.0.5).

Here is a working example with react-bootstrap tabs:

http://jsbin.com/mayanakiqo/edit?js,output

class MyComponent extends React.Component {
  render() {

    let colStyles = {
      float: 'left',
      width: '50%',
      padding: '10px',
      background: '#ddd',
      border: '4px solid white',
      boxSizing: 'border-box'
    }

    return (
      <div>
        <Tabs defaultActiveKey={2}>
          <Tab eventKey={1} title="Tab 1">
            <Equalizer byRow={false}>
              <div style={colStyles}>
                <img src="http://placehold.it/200x300" />
              </div>
              <div style={colStyles}>
                Test content
              </div>
            </Equalizer>
          </Tab>
          <Tab eventKey={2} title="Tab 2">
            <Equalizer byRow={false}>
              <div style={colStyles}>
                <img src="http://placehold.it/200x300" />
              </div>
              <div style={colStyles}>
                Test content
              </div>
            </Equalizer>
          </Tab>
          <Tab eventKey={3} title="Tab 3">
            <Equalizer byRow={false}>
              <div style={colStyles}>
                <img src="http://placehold.it/200x300" />
              </div>
              <div style={colStyles}>
                Test content
              </div>
            </Equalizer>
          </Tab>
        </Tabs>
      </div>
    )
  }
}

The other option would be to use flexbox to equalize the heights see https://codepen.io/imohkay/pen/gpard for example however it will depend on what browsers you need to support.