The project folder is as follows:

“`html

< script SRC = "https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> <link Href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script SRC = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> < script SRC = "https://unpkg.com/[email protected]/dist/react.js" > < / script > < script SRC = "https://unpkg.com/[email protected]/dist/react-dom.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.5/react-bootstrap.js" > < / script > < script SRC = "https://unpkg.com/[email protected]/babel.min.js" > < / script > < script SRC = "/ js/main js" type="text/babel"></script> <link href="/css/main.css" rel="stylesheet"> </head> <body> <div class="container"> <div id="product-list"></div> </div> </body>Copy the code

` ` `

var ListBox = React.createClass({
    render: function() {
        return (
			<button type="button" className="list-group-item" id="product-list">
				<div className="row vertical-align">
					<div className="col-sm-8 top">
						<h4>Top Label</h4>
						<p>10 boxes at 20 bags</p>
					</div>
					<div className="col-sm-3 text-right top">
						<h4>
							99.99
							<small className="text-muted"> EUR</small>
						</h4>
						<p>Available</p>
					</div>
					<div className="col-sm-1 center">
						<span className="glyphicon glyphicon-chevron-right pull-right" aria-hidden="true"></span>
					</div>
				</div>
			</button>); }});var ProductList = React.createClass({
	render: function() {
		return (
			<div className="list-group">
				<ListBox />
				<ListBox />
				<ListBox />
			</div>)}}); ReactDOM.render(<ProductList />.document.getElementById('product-list'));Copy the code
.vertical-align {
    display: flex;
    align-items: baseline;
}
.vertical-align .top {
    align-self: baseline;
}
.vertical-align .center {
    align-self: center;
}
.available {
    color: green;
    font-weight: bold;
}
.discontinued {
    color: red;
    font-weight: bold;
}
Copy the code

Final result:

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: