JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
CSS
.column {
border: 1px solid black;
padding: 5px;
margin: 5px;
display: inline-block;
width: 50px;
vertical-align: top;
}
JavaScript 1.7
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
height: null
};
this.columns = ['hello', 'this is a bit more text', 'this is a bit more text ... and even more'];
}
render(){
return <div ref={(node) => this.calcHeight(node)}>
{
this.columns.map((column) => {
return <div style={{height: this.state.height}} className="column">{column}</div>
})
}
</div>;
}
calcHeight(node) {
if (node && !this.state.height) {
this.setState({
height: node.offsetHeight
});
}
}
}
React.render(<Example />, document.getElementById('container'));