flex trial and error layout

by Pankaj Parkar

HTML

<button class="wrapper">
        <div>Ic</div>
        <div class="content">
            <div class="name">Pankaj Parkar</div>
            <div class="info">
                <div class="title">Senior Software Engineer</div>
                <div class="desc">Test Test Test Test Test Test</div>
            </div>
        </div>
        <div class="arrow">
            >
        </div>
    </button>
<button class="wrapper">
        <div>Ic</div>
        <div class="content">
            <div class="name">Pankaj Parkar PASDASD ASDASDASD</div>
            <div class="info">
                <div class="title">Senior Software Engineer ASDS</div>
                <div class="desc">Test Test Test Test Test Test</div>
            </div>
        </div>
        <div class="arrow">
            >
        </div>
    </button>
<button class="wrapper">
        <div>Ic</div>
        <div class="content">
            <div class="name">Pankaj Parkar PASDASD ASDASDASD</div>
            <div class="info">
                <div class="title">Senior</div>
                <div class="desc">Test TEssdf dfsd Test Test</div>
            </div>
        </div>
        <div class="arrow">
            >
        </div>
    </button>

CSS

.wrapper {
  background-color: white;
  width: 300px;
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}

.content {
  display: flex;
  flex-flow: row nowrap;
}

.name {
  max-width: 50%;
  flex-shrink: 0;
}

.info {
  display: flex;
}

.info .title {
  max-width: 50%;
  flex-shrink: 0;
}

.info .desc {
  flex-grow: 1;
}