JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular-animate.min.js"></script>
<script src="https://cdn.rawgit.com/wtfribley/angular-listview/master/angular-listview.min.js"></script>
<body ng-app="listViewApp" ng-controller="listViewAppController">
    <div list-view list="foo in collectionOfFoos" select-mode="single">
        <div>
            <h1>This could be a header, title, whatever!</h1>
            <button list-edit-toggle>You can toggle "$editMode"</button>
            <button list-add="addAFoo()">You can add things too!</button>
        </div>
        <div list-item>
            <div class="list-item-body" ng-class="{'edit-mode': $editMode}">
                <h3>This will be repeated over and over and over!</h3>
                <pre>{{ foo | json}}</pre>
            </div>
            <div class="list-item-controls" ng-class="{'edit-mode': $editMode}">
                <button list-item-edit="remove">Remove</button>
            </div>
        </div>
    </div>
</body>

CSS

html {
        font-family: "Helvetica", sans-serif;
        font-size: 16px;
      }

      h1 {
        font-size: 1.5rem;
      }

      h3 {
        margin: 0;
        font-size: 1rem;
      }

      button {
        display: inline-block;
        border: 0;
        outline: 0;
        text-align: center;
        cursor: pointer;

        padding: .5rem 1rem;

        background-color: #43ac6a;
      }

      pre {
        padding: 1rem;
        background-color: #dedede;
        white-space: pre-wrap;
      }

      button[list-edit-toggle] {
        background-color: #f08a24;
      }

      button[list-item-edit="remove"] {
        padding: .5rem 0;
        height: 100%;
        width: 100%;
        background-color: #f04124;
      }

      div[list-view] {
        width: 480px;
        margin: 0 auto;
        padding: 1rem;

        background-color: #eaeaea;
      }

      div[list-view] > div:first-child {
        padding: .5rem 1rem;
        background-color: #cdcdcd;
      }

      div[list-view] > div:first-child h1 {
        margin-top: 0;
      }

      div[list-item] {
        display: flex;
        margin-top: .5rem;
        height: 200px;
      }

      div.list-item-body {
        width: 100%;
        padding: 1rem 1.5rem;
        background-color: #ababab;
        transition: .3s width ease-out;
      }

      div[list-item]:nth-child(2n) div.list-item-body {
        background-color: #909090;
      }

      div.list-item-body.edit-mode {
        width: 80%;
      }

      div.list-item-controls {
        height: 100%;
        width: 0%;
        transition: .3s width ease-out;
      }

      div.list-item-controls.edit-mode {
        width: 20%;
      }

JavaScript

var listViewApp = angular.module('listViewApp', ['listview']);

listViewApp.controller('listViewAppController', ['$scope', function($scope) {
    $scope.collectionOfFoos = [
        {title: 'A', description: 'This is an A'},
        {title: 'B', description: 'This is a B'},
        {title: 'C', description: 'This is a C'},
        {title: 'D', description: 'This is a D'},
        {title: 'E', description: 'This is an E'},
        {title: 'F', description: 'This is an F'}
    ];
    
    $scope.addAFoo = function addAFoo() {
        var foo = {title: 'Foo', description: 'This is a Foo'};
        $scope.collectionOfFoos.push(foo);   
    }
}]);