[![enter image description here](https://i.stack.imgur.com/F9Vxy.jpg)](https://i.stack.imgur.com/F9Vxy.jpg)

I am making a chat application with angular and bootstrap for practice.
Trying to make div border wrap around the text like the iPhone message bubbles,
inline-block didn't seem to work.

relevant code:

```
  <div class="col-md-4 chatWindow">
    <div ng-show="activeFriend">
      <div class="activeFriendBox">Chat with {{activeFriend.name}}</div>

      <div class="messageList">
        <div class="messages"  
          ng-class="{ 'message-right': message.from === currentUser, 'message-left': message.from !==currentUser }" 
          ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
          <span>{{message.from}}</span>
          <span>{{message.message}}</span>
        </div>
      </div>

      <div class="sendMessage">
        <form ng-submit='sendMessage(messageText)' name='messageForm'>
          <input type='text' name='message' ng-model='messageText' required/>
          <input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
        </form>
      </div>

    </div>
  </div>

```

CSS:

```
.messages {
  border: 1px solid black;
  border-radius: 15px;
  /*display: inline-block;*/
}

.message-right {
  text-align: right;
}

.message-left {
  text-align: left;
}

```