JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<button type="button" class="btn btn-primary margin-bottom-10" data-bind="click: slideInOutClick()"> Show more details </button>

<div class="slide-in-out-container w300" data-bind="css: { 'show200': slideOut() === false }">
    <div class="panel panel-primary">
        <div class="panel-body">
            <p>Some text here</p>
            <p>And some more text here</p>
        </div>
        
    </div>
</div>

<!-- Remove the HTML below here, and this works fine. -->

<button type="button" class="btn btn-warning margin-bottom-10" data-bind="click: slideInOutClick()"> Another button </button>

<div class="slide-in-out-container w300" data-bind="css: { 'show100': slideOut() === false }">
    <div class="panel panel-primary">
        <div class="panel-body">
            <p>Different text here</p>
        </div>
        
    </div>
</div>

CSS

body { padding: 10px; }
.w300 { width: 300px; }
.margin-bottom-10 { margin-bottom: 10px; }
/* ------------------------------ */

.slide-in-out-container {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.slide-in-out-container.show100 {
   max-height: 200px;   
}

.slide-in-out-container.show200 {
   max-height: 200px;   
}

JavaScript

// Global Knockout model
ko.applyBindings(new globalModel());

function globalModel(){
    var self = this;

    self.slideOut = ko.observable();

    self.slideInOutClick = function(){
        self.slideOut(!self.slideOut());
    }
}