React

HTML

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

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.title {
    font-weight: bold;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    max-width: 100%;
}

.col-md-4 {
    flex: 0 0 33.3333333%;
    max-width: 33.3333333%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.book {
    border: 1px solid gray;
    padding: 15px;
    margin-bottom: 20px;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ title: "Learn JavaScript", summary: 'This is a long summary that is a bit longer than usual' },
        { title: "Learn React", summary: 'Perhaps this is a normal summary' },
        { title: "Play around in JSFiddle", summary: 'Really Long Summary That Takes up more space 1 Really Long Summary That Takes up more space 1' },
        { title: "Build something awesome", summary: 'Another normal-ish summary' }
      ]
    }
  }
  
  render() {
    return (
      <div className="row">
        {
        	this.state.items.map(i => 
            	<div className="col-md-4">
                    <div className="book">
                        <div className="title">{i.title}</div>
                        <div>{i.summary}</div>
                    </div>
            	</div>
            )
        }
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))